# react-lunr

> React component to search a Lunr index

Latest version **1.1.0** (published 2021-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-lunr
pnpm add react-lunr
yarn add react-lunr
bun add react-lunr
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-01-06 |
| First published | 2018-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Angelo Ashmore |
| Maintainers | angeloashmore |
| Keywords | react, component, search, lunr |

## Links

- npm: https://www.npmjs.com/package/react-lunr
- Repository: https://github.com/angeloashmore/react-lunr
- npm.io page: https://npm.io/package/react-lunr

## Dependencies (3)

- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [tiny-warning](https://npm.io/package/tiny-warning.md) ^1.0.3
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.1.0

## Recent versions

- 1.1.0 (latest) — 2021-01-06
- 0.6.0-alpha.1 (next) — 2019-03-23
- 1.0.0 — 2020-04-09
- 0.6.0 — 2019-03-23
- 0.6.0-alpha.0 — 2019-03-22
- 0.5.0 — 2019-02-16
- 0.4.1 — 2019-02-15
- 0.4.0 — 2019-02-15
- 0.3.0 — 2018-09-05
- 0.2.0 — 2018-08-30
- 0.1.1 — 2018-08-24
- 0.1.0 — 2018-08-24

## README

# react-lunr

React hook to search a [Lunr][lunr] index.

## Status

[![npm version](https://img.shields.io/npm/v/react-lunr?style=flat-square)](https://www.npmjs.com/package/react-lunr)
[![Build Status](https://img.shields.io/github/workflow/status/angeloashmore/react-lunr/CI?style=flat-square)](https://github.com/angeloashmore/react-lunr/actions?query=workflow%3ACI)

## Installation

```sh
npm install --save react-lunr
```

## API

### `useLunr`

```js
useLunr(query?: string | lunr.Index.QueryBuilder, index?: lunr.Index | JSON | string, store: object | string) => object[]
```

The `useLunr` [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` \| `lunr.Index.QueryBuilder` | The search query. As this value updates, the return value will be updated. This can be a string or a query builder.                   |
| **`index`** | `lunr.Index \| JSON \| string`        | The Lunr index. This can be an instance of a Lunr index or one that has been exported via `index.toJSON` or `JSON.stringify`.         |
| **`store`** | `JSON \| string`                      | Object mapping a result `ref` to an object of data. This can be an object or an object that has been exported via `JSON.stringified`. |

If `store` is not provided, the raw results data from Lunr will be returned
instead. This includes the `ref` used when creating the index.

#### Example

The following example renders a text input and queries the Lunr 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.

```js
import React, { useState } from 'react'
import { useLunr } from 'react-lunr'
import { Formik, Form, Field } from 'formik'

const index = /* a lunr 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 = useLunr(query, index, store)

  return (
    <Formik
      initialValues={{ query: '' }}
      onSubmit={(values, { setSubmitting }) => {
        setQuery(values.query)
        setSubmitting(false)
      }}
    >
      <Form>
        <Field name="query" />
      </Form>
      <h1>Results</h1>
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </Formik>
  )
}
```

[lunr]: https://lunrjs.com/
[render-props]: https://reactjs.org/docs/render-props.html
[hooks]: https://reactjs.org/docs/hooks-intro.html
[formik]: https://github.com/jaredpalmer/formik

---
_Source: https://npm.io/package/react-lunr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._