react-search-fuse
v0.0.2
Published
Fuse.js, as a React component
Downloads
6
Readme
react-search-fuse
A Fuse.js powered client side fuzzy search react component.
disclaimer: This is still a bit of a work in progress. It has some limitations, so use at your discretion
Installation and Usage
npm install react-search-fuse
Import ReactSearchFuse
where you would like to use it.
import ReactSearchFuse from 'react-search-fuse'
Supply some documents
, specify the options
, and a filter
to search by.
Then just supply a children
render function which will
receive results
.
<ReactSearchFuse
options={{keys: ['name', 'character']}}
documents=[
{id: 1, name: 'Logan', character:'Wolverine'},
{id: 2, name: 'Anna Marie', character: 'Rogue'}
]>
{results => result.map(result => (
<div key={result.id}>
<h1>{result.name}</h1> - {result.character}
</div>
))}
</ReactSearchFuse>
Todo
This isn't quite finished. Some of the planned changes:
- the fuse index is rebuild on every rerender, it could probably be more performant