Code Monkey home page Code Monkey logo

react-searchable's Introduction

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

react-searchable's People

Contributors

dependabot[bot] avatar emilbaekdahl avatar frederikspang avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

frederikspang

react-searchable's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.