Search component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

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 *