React-fuzzysort NPM

React Fuzzysort

🔎 The Fuzzysort library implemented as a handy React component

Installation

npm install react-fuzzysort
# or
yarn add react-fuzzysort

Basic Usage

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>
  );
}

Work Smarter By Mapping!

const list = ['🥕 Carrot', '🍌 Banana', '🍅 Ketchup'];

return (
  <Search
    list={list.map((listItem) => ({
      query: listItem,
      node: <Item>{listItem}</Item>,
    }))}
  />
);

Documentation

Info: documentation is temporarily available in the README while my website undergoes construction

Configuration Options

These are passed down as props to the Search component.

`list`

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 value
- node: the thing that is rendered