Deprecated in favor of react-use-search.

react-searchable

Simple collection search for React based on the function-as-child/render props pattern.

Installation

Add react-searchable to your dependencies using your favorite package manager. With Yarn:

yarn add react-searchable

or using npm:

npm install react-searchable

Usage

<Searchable />

react-searchable exports a single React component as its default export.

Props

• items: Array<T>: An array of items of type T to be searched.
• predicate: (item: T, query: string) => Boolean: A boolean function determining wether item should be included in the searched list based on the current query string.
• children | render: ({ items: Array<T>, query: string, handleChange: Function }) => ReactNode: A render function for handling the search results.
• debounce?: int | boolean: The amount in milliseconds to debounce the filtering function. false disables debounce and true uses the default. Defaults to 300.
• initialQuery?: string: A query string used for the initial search. Default to the empty string.
• filter?: boolean: Determines what will be included in the searched list when the query string is empty. If true, the list will contain all items (filtering); if false, the list will be empty. Defaults to false.

Example

importReactfrom'react';importSearchablefrom'react-searchable';constpredicate=(user,query)=>user.email.includes(query)||user.name.includes(query)constUserList=({ users })=>(<Searchableitems={users}predicate={predicate}>{({ items, query, handleChange })=>(<><inputtype="text"onChange={handleChange}value={query}/>{items.length>0&&(<ul>{items.map(({ id, name, email })=><likey={id}>{name} ({email})</li>)}</ul>)}</>)}</Searchable>);