https://github.com/angeloashmore/react-use-flexsearch
React hook to search a FlexSearch index
https://github.com/angeloashmore/react-use-flexsearch
Last synced: 9 months ago
JSON representation
React hook to search a FlexSearch index
- Host: GitHub
- URL: https://github.com/angeloashmore/react-use-flexsearch
- Owner: angeloashmore
- Created: 2019-03-23T02:26:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:21:36.000Z (about 3 years ago)
- Last Synced: 2025-04-09T22:16:21.871Z (9 months ago)
- Language: JavaScript
- Size: 1.72 MB
- Stars: 103
- Watchers: 2
- Forks: 16
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-list - react-use-flexsearch
README
# react-use-flexsearch
React hook to search a [FlexSearch][flexsearch] index.
## Status
[](http://badge.fury.io/js/react-use-flexsearch)
## Installation
```sh
npm install --save react-use-flexsearch
```
## API
```js
useFlexSearch(query: String, index: Index | String, store: Object, options: Object) => Object[]
```
The `useFlexSearch` [hook][hooks] takes your search query, index, and store and
returns results as an array. Searches are memoized to ensure efficient
searching.
### Parameters
| Name | Type | Description |
| ------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------- |
| **`query`** | `String` | The search query. As this value updates, the return value will be updated. |
| **`index`** | `Index \| String` | The FlexSearch index. This can be an instance of a FlexSearch index or one that has been exported via `Index.export`. |
| **`store`** | `Object` | Object mapping a result `id` to an object of data. |
| **`options`** | `Object` | Search options passed to `Index.search`. |
### Example
The following example renders a text input and queries the FlexSearch index on
form submission.
Note: [Formik][formik] is used in the following example to handle form state,
but is not required. As long as your query is passed as the first parameter, you
can manage how to store it.
```jsx
import React, { useState } from 'react'
import { useFlexSearch } from 'react-use-flexsearch'
import { Formik, Form, Field } from 'formik'
const index = /* a FlexSearch index */
const store = {
1: { id: 1, title: 'Document 1' },
2: { id: 2, title: 'Document 2' },
3: { id: 3, title: 'Document 3' },
}
const SearchBar = () => {
const [query, setQuery] = useState(null)
const results = useFlexSearch(query, index, store)
return (
{
setQuery(values.query)
setSubmitting(false)
}}
>
Results
{results.map(result => (
- {result.title}
))}
)
}
```
[flexsearch]: https://github.com/nextapps-de/flexsearch
[hooks]: https://reactjs.org/docs/hooks-intro.html
[formik]: https://github.com/jaredpalmer/formik