Negligible Participation Metric

    react-lunr
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    react-lunr

    React hook to search a Lunr index.

    Status

    npm version Build Status

    Installation

    npm install --save react-lunr

    API

    useLunr

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

    The useLunr hook 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 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.

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

    Install

    npm i react-lunr

    DownloadsWeekly Downloads

    1,107

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • angeloashmore