Search component for React [NPM Package]

Reading Time: 2 minutes

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Search component for React using some CSS styles from Bootstrap as well as custom CSS styles. https://www.npmjs.com/package/library-search-component Install and save component as a dependency
    
    npm install --save library-search-component
    
    
    Import component into your app
    
    import Search from 'library-search-component'
    
    
    Create an array of objects with the keys being name and id
    
    const searchData = [
      {
        name: 'Item one',
        id: 'one'
      },
      {
        name: 'Item two',
        id: 'two'
      },
      {
        name: 'Item three',
        id: 'three'
      }
    ]
    
    
    Create and assign search term state with empty value
    
    constructor(props) {
      super(props)
    
      this.state = {
        searchTerm: ''
      }
    }
    
    
    Create the function that will handle the user search
    
    userSearch (event) {
      const searchData = [
        {
          name: 'Item one',
          id: 'one'
        },
        {
          name: 'Item two',
          id: 'two'
        },
        {
          name: 'Item three',
          id: 'three'
        }
      ]
    
      let searchTerm = event.target.value.toLowerCase()
    
      let searchSuggestions = searchData.filter((data) => {
        let filterComponents = data.name.toLowerCase()
        return filterComponents.includes(searchTerm)
      })
    
      this.setState((state, props) => {
        return { searchSuggestions, searchTerm }
      })
    }
    
    
    Create the function to clear a user search
    
    clearSearch (event) {
      event.preventDefault();
    
      let searchTerm = '';
    
      this.setState((state, props) => {
        return { searchTerm, searchTerm }
      })
    }
    
    
    Render the component with the functions we created, object array as well as any other props that are needed
    render() {
      const searchData = [
        {
          name: "Item one",
          id: "one"
        },
        {
          name: "Item two",
          id: "two"
        },
        {
          name: "Item three",
          id: "three"
        }
      ];
    
      let searchSuggestions = this.state.searchSuggestions;
      let searchTerm = this.state.searchTerm;
    
      return (
        <div className="btn-group search">
          <Search
            searchData={searchData}
            searchTerm={searchTerm}
            searchSuggestions={searchSuggestions}
            userSearch={this.userSearch.bind(this)}
            clearSearch={this.clearSearch.bind(this)}
            placeHolder="Search..."
          />
    
          {searchTerm !== "" ? (
            <div className="dropdown-menu">
              {searchSuggestions.length > 0 ? (
                searchSuggestions.map((searchSuggestions, index) => {
                  return (
                    <a href="/" className="dropdown-item" onClick="/" key={index}>
                      {searchSuggestions.name}
                    </a>
                  );
                })
              ) : (
                <div className="dropdown-item">No result(s)</div>
              )}
            </div>
          ) : null}
        </div>
      );
    }
    Prop Values
    searchData Object
    searchTerm String
    searchSuggestions Object
    userSearch userSearch function
    clearSearch clearSearch function
    placeHolder String

    Bronson Dunbar

    I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

    Leave a Reply

    Your email address will not be published. Required fields are marked *