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 typeT
to be searched.predicate: (item: T, query: string) => Boolean
: A boolean function determining wetheritem
should be included in the searched list based on the currentquery
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 andtrue
uses the default. Defaults to300
.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. Iftrue
, the list will contain all items (filtering); iffalse
, the list will be empty. Defaults tofalse
.
Example
;; const predicate = useremail || username const UserList = <Searchable items=users predicate=predicate> <> <input type="text" onChange=handleChange value=query /> itemslength > 0 && <ul> items </ul> </> </Searchable>;