Как написать простую плагин поиска по реагированию, опубликуйте его на NPM и разверните его на страницы GitHub

npm install -g create-react-library

create-react-library

cd react-search-box && yarn start

cd react-search-box/example && yarn start

import React, { Component } from 'react'import PropTypes from 'prop-types'

import styles from './styles.css'

export default class ReactSearchBox extends Component {  static propTypes = {    /**     * value: The default value for the input box.     * placeholder: The placeholder text for the input box.     */    value: PropTypes.string,    placeholder: PropTypes.string  }

  state = {    value: ''  }

  componentDidMount() {    const { value } = this.props

    this.setState({      value: value    })  }

  handleInputChange = e => {    const { value } = e.target

  this.setState({      value: value    })  }

  inputNode = () => {    /**     * This function is responsible for rendering the input box.     * The input box acts as a source of entry for the data from the user.     */    const { placeholder } = this.props    const { value } = this.state

    return (          )  }

  render() {    return 
{this.inputNode()}
  }}

handleInputChange = e => {  const { value } = e.target

  this.setState({    value  })}

import React, { Component } from "react";import ReactSearchBox from "react-search-box";

export default class App extends Component {  data = [    {      key: "john",      value: "John Doe"    },    {      key: "jane",      value: "Jane Doe"    },    {      key: "mary",      value: "Mary Phillips"    },    {      key: "robert",      value: "Robert"    },    {      key: "karius",      value: "Karius"    }  ];

  render() {    return (      
              
    );  }}

import React, { Component } from 'react'import PropTypes from 'prop-types'

import styles from './styles.css'

export default class ReactSearchBox extends Component {  static propTypes = {    /**     * value: The default value for the input box.     * placeholder: The placeholder text for the input box.     * data: An array of objects which acts as the source of data for the dropdown.     */    value: PropTypes.string,    placeholder: PropTypes.string,    data: PropTypes.array.isRequired  }

  static defaultProps = {    /**     * Set data prop as an empty array in case it's not passed.     */    data: []  }

  state = {    value: ''  }

  componentDidMount() {    /**     * This function is the same as before     */    }

  handleInputChange = e => {    /**     * This function is the same as before     */    }

  inputNode = () => {    /**     * This function is the same as before     */  }

  dropdownNode = () => {    /**     * This function is responsible for rendering the dropdown.     */    const { data } = this.props

    return (      
        
          {data.map(record => {            return (              
                {record.value}              
            )          })}        
      
    )  }

render() {    return (      
        {this.inputNode()}        {this.dropdownNode()}      
    )  }}

yarn add fuse.js

import React, { Component } from 'react'import PropTypes from 'prop-types'import Fuse from 'fuse.js'

import styles from './styles.css'

export default class ReactSearchBox extends Component {  static propTypes = {    /**     * This is same as before     */  }

  static defaultProps = {    /**     * This is same as before     */  }

  state = {    /**     * 'matchedRecords' stores the items when the input box's value     * matches with any item from the 'data' prop.     */    value: '',    matchedRecords: []  }

  constructor(props) {    super(props)

    const { data } = props

    /**     * These options are from Fuse plugin. Check out http://fusejs.io/     * for more details.     */    const options = {      /**       * At what point does the match algorithm give up. A threshold of 0.0       * requires a perfect match (of both letters and location), a threshold       * of 1.0 would match anything.       */      threshold: 0.05,      /**       * Determines approximately where in the text is the pattern expected to be found.       */      location: 0,      /**       * Determines how close the match must be to the fuzzy location       * (specified by location). An exact letter match which is distance       * characters away from the fuzzy location would score as a complete       * mismatch. A distance of 0 requires the match be at the exact       * location specified, a distance of 1000 would require a perfect       * match to be within 800 characters of the location to be found       * using a threshold of 0.8.       */      distance: 100,      /**       * When set to include matches, only the matches whose length exceeds this       * value will be returned. (For instance, if you want to ignore single       * character index returns, set to 2).       */      minMatchCharLength: 1,      /**       * List of properties that will be searched. This supports nested properties,       * weighted search, searching in arrays of strings and objects.       */      keys: ['value']    }

    this.fuse = new Fuse(data, options)  }

  componentDidMount() {    const { value } = this.props

    /**     * If any 'value' is passed as prop, find if it matches with any item     * from teh 'data' prop. If there is any record, which matches with     * the query, update 'matchedRecord' state with the matched object(s).     *     * Also, update the 'value' state with the 'value' prop.     */    const matchedRecords = this.fuse.search(value)

    this.setState({      value: value.trim(),      matchedRecords,      /**       * Control the showing and hiding of the dropdown when there is any value       * in the input box. But, close the dropdown once any dropdown item is       * clicked.       */      showDropdown: !!value.trim()    })  }

  handleInputChange = e => {    /**     * This function is responsible for checking if any items from the input     * box's value matches with any item form the 'data' prop. If any item matches,     * then that matched object is pushed into the 'matchedRecords' state. That     * state is responsible for populating the dropdown.     */

    const { value } = e.target

/**     * Check all the values from 'data' array whose 'value' matches with     * 'value' using Fuse plugin.     */    const matchedRecords = this.fuse.search(value)

/**     * Update 'value' state with the value from the input box     * Update 'matchedRecords' state with the matched records from the data array.     */    this.setState({      value: value.trim(),      matchedRecords,      /**       * Show the dropdown onChange of the input       */      showDropdown: true    })  }

  inputNode = () => {    /**     * This function is the same as before     */  }

  handleDropdownItemClick = record => {    /**     * This function is responsible for updating the value inside the     * input box when any dropdown item is clicked.     *     * The 'value' state is updated with the clicked record's value.     */

  const { value } = record

  this.setState({      value,      /**       * Hide the dropdown once any dropdown item is clicked       */      showDropdown: false    })  }

  dropdownNode = () => {    /**     * This function is responsible for rendering the dropdown.     * When any value from the input box matches with any value from the     * 'data' prop, that matched object from the 'data' array shows up     * in the dropdown's li. The matched values are stored in the     * 'matchedRecords' state.     */    const { matchedRecords, showDropdown } = this.state

/**     * If there is no value present in the input box, then the dropdown     * shouldn't appear.     */    if (!showDropdown) return false

  return (      
        
          {matchedRecords.map(record => {            return (              
 this.handleDropdownItemClick(record)}              >                {record.value}              
            )          })}        
      
    )  }

  render() {    /**     * This function is the same as before     */  }}

git remote add origin https://github.com/ghoshnirmalya/react-search-box

git push origin master

yarn publish

yarn deploy