Skip to content
This repository has been archived by the owner on May 18, 2020. It is now read-only.
/ react-searchable Public archive

๐Ÿ”Ž Simple collection search for React based on the render-prop pattern

License

Notifications You must be signed in to change notification settings

prograsdk/react-searchable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

53 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Deprecated in favor of react-use-search.

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