react-searchable
TypeScript icon, indicating that this package has built-in type declarations

0.3.3 • Public • Published

react-searchable

npm CircleCI codecov Maintainability

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

import React from 'react';
import Searchable from 'react-searchable';
 
const predicate = (user, query) =>
  user.email.includes(query) || user.name.includes(query)
 
const UserList = ({ users }) => (
  <Searchable items={users} predicate={predicate}>
    {({ items, query, handleChange }) => (
      <>
        <input type="text" onChange={handleChange} value={query} />
 
        {items.length > 0 && (
          <ul>
            {items.map(({ id, name, email }) =>
              <li key={id}>{name} ({email})</li>
            )}
          </ul>
        )}
      </>
    )}
  </Searchable>
);

Package Sidebar

Install

npm i react-searchable

Weekly Downloads

1

Version

0.3.3

License

MIT

Unpacked Size

13.9 kB

Total Files

11

Last publish

Collaborators

  • emilbaekdahl
  • frederikspang