๐ The Fuzzysort library implemented as a handy React component
npm install react-fuzzysort
# or
yarn add react-fuzzysort
import { Search } from 'react-fuzzysort';
function Catalogue() {
const input = useRef<HTMLInputElement>(null);
return (
<Wrapper>
<SearchBar ref={input} />
<Search
input={input}
fallback={<FallbackText>No results!</FallbackText>}
list={[
{ query: 'carrot', node: <Item>๐ฅ Carrot</Item> },
{ query: 'banana', node: <Item>๐ Banana</Item> },
{ query: 'ketchup', node: <Item>๐
Ketchup</Item> },
// and so on...
]}
/>
</Wrapper>
);
}
const list = ['๐ฅ Carrot', '๐ Banana', '๐
Ketchup'];
return (
<Search
list={list.map((listItem) => ({
query: listItem,
node: <Item>{listItem}</Item>,
}))}
/>
);
Info: documentation is temporarily available in the README while my website undergoes construction
These are passed down as props
to the Search
component.
- A list of items to be searched from
- This is an array of objects (
SearchItem[]
) - Search items includes:
query
: the string that is compared against the input valuenode
: the thing that is rendered
- A React
ref
to the search input
- The fallback that is rendered when there are no results
- A debounce time avoids excessive rerenders
- By default, it is
0
which has proven to be fine for a couple thousand items
- Fires when the first item in the list changes
- Does not fire on mount
- Fires when there are no results
- Does not fire when there are no results multiple times in a row
- Lets you tap into the configurations for the internally used fuzzysort library
- See the fuzzysort documentation
- Fixed several issues with
package.json
- Added React Fuzzysort