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.

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>