Skip to content

jacoobia/useSearchableList

Repository files navigation

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