Use-searchable-list NPM

useSearchableList

This project is partially maintained feel free to request update/post issue on the github though!

A hook written for a personal project that I decided could be useful to I separated it out to its own package to deploy to npm for others to use, plus with it beeing open source anyone can contribute to improve it for the better of us all.

npm bundle size (version) GitHub

Options

Name	Type	Description
clearOnEmpty	boolean	Should the list be empty if there is no filter value
firstCharacterCheck	boolean	Should the first character entered run a startsWith check
debounce	boolean	Should the filter list use debounce
delay	number	The delay of the debounce

Example Usage

Define the hook baseed on the filter property name & optionally set props

const [people, setPeople, filter] = useSearchableList<Person>('firstname', {
  debounce: true,
  delay: 300
});

Call the filter function and pass in a value to filter by

  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    const value: string = event.currentTarget.value;
    filter(value);
  };

  return (
    <div className="App">
      <h1>People</h1>
      <input
        className="SearchBar"
        onChange={handleChange}
        type="text"
        name="example"
        placeholder="Search..."/>
        ....

Use the returned list to display whatever you want to do

<div className='PersonList'>
    {people.map((person: Person) => {
        return (
            <PersonProfile
                firstname={person.firstname}
                lastname={person.lastname}
                email={person.email}
            />
        );
    })}
</div>

example