# gatsby-plugin-lunr > Multilanguage search for Gatsby.js using Lunr.js Latest version **1.5.2** (published 2019-07-23) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-plugin-lunr pnpm add gatsby-plugin-lunr yarn add gatsby-plugin-lunr bun add gatsby-plugin-lunr ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.5.2 | | Published | 2019-07-23 | | First published | 2018-06-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 11.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 64 | | Author | Humansee Labs | | Maintainers | humanseelabs | | Keywords | gatsby, gatsby-plugin, search, lunr | ## Links - npm: https://www.npmjs.com/package/gatsby-plugin-lunr - Repository: https://github.com/humanseelabs/gatsby-plugin-lunr - Homepage: https://github.com/humanseelabs/gatsby-plugin-lunr#readme - Issues: https://github.com/humanseelabs/gatsby-plugin-lunr/issues - npm.io page: https://npm.io/package/gatsby-plugin-lunr ## Dependencies (3) - [lunr](https://npm.io/package/lunr.md) ^2.3.6 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.3 - [lunr-languages](https://npm.io/package/lunr-languages.md) ^1.1.0 ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.5.2 (latest) — 2019-07-23 - 1.5.1 — 2019-06-03 - 1.5.0 — 2019-04-24 - 1.4.0 — 2019-02-04 - 1.3.0 — 2018-12-16 - 1.2.0 — 2018-09-17 - 1.1.0 — 2018-08-26 - 1.0.0 — 2018-07-27 - 0.1.10 — 2018-07-09 - 0.1.9 — 2018-07-04 - 0.1.8 — 2018-06-28 - 0.1.7 — 2018-06-28 - 0.1.6 — 2018-06-28 - 0.1.5 — 2018-06-28 - 0.1.4 — 2018-06-28 - … 3 more at https://npm.io/package/gatsby-plugin-lunr/versions ## README # Search Plugin for Gatsby Gatsby plugin for full text search implementation based on Lunr.js client-side index. It supports multilanguage search. Search index is placed into the /public folder during build time and has to be downloaded on client side on run time. ## Getting Started Install `gatsby-plugin-lunr` ``` npm install --save gatsby-plugin-lunr ``` or ``` yarn add gatsby-plugin-lunr ``` Add `gatsby-plugin-lunr` configuration to the `gatsby-config.js` as following: ```javascript module.exports = { plugins: [ { resolve: `gatsby-plugin-lunr`, options: { languages: [ { // ISO 639-1 language codes. See https://lunrjs.com/guides/language_support.html for details name: 'en', // A function for filtering nodes. () => true by default filterNodes: node => node.frontmatter.lang === 'en', // Add to index custom entries, that are not actually extracted from gatsby nodes customEntries: [{ title: 'Pictures', content: 'awesome pictures', url: '/pictures' }], }, { name: 'fr', filterNodes: node => node.frontmatter.lang === 'fr', }, ], // Fields to index. If store === true value will be stored in index file. // Attributes for custom indexing logic. See https://lunrjs.com/docs/lunr.Builder.html for details fields: [ { name: 'title', store: true, attributes: { boost: 20 } }, { name: 'content' }, { name: 'url', store: true }, ], // How to resolve each field's value for a supported node type resolvers: { // For any node of type MarkdownRemark, list how to resolve the fields' values MarkdownRemark: { title: node => node.frontmatter.title, content: node => node.rawMarkdownBody, url: node => node.fields.url, }, }, //custom index file name, default is search_index.json filename: 'search_index.json', //custom options on fetch api call for search_ındex.json fetchOptions: { credentials: 'same-origin' }, }, }, ], } ``` ### Using plugins ```javascript const myPlugin = (lunr) => (builder) => { // removing stemmer builder.pipeline.remove(lunr.stemmer) builder.searchPipeline.remove(lunr.stemmer) // or similarity tuning builder.k1(1.3) builder.b(0) } ``` Pass it to the `gatsby-config.js`: ... languages: [ { name: 'en', ... plugins: [myPlugin] } ] ... ## Implementing Search in Your Web UI The search data will be available on the client side via `window.__LUNR__` that is an object with the following fields: - `index` - a lunr index instance - `store` - object where the key is a gatsby node ID and value is a collection of field values. ```javascript import React, { Component } from 'react' // Search component export default class Search extends Component { constructor(props) { super(props) this.state = { query: ``, results: [], } } render() { return (
) } getSearchResults(query) { if (!query || !window.__LUNR__) return [] const lunrIndex = window.__LUNR__[this.props.lng]; const results = lunrIndex.index.search(query) // you can customize your search , see https://lunrjs.com/guides/searching.html return results.map(({ ref }) => lunrIndex.store[ref]) } search = event => { const query = event.target.value const results = this.getSearchResults(query) this.setState(s => { return { results, query, } }) } } ``` Sample code and example on implementing search within gatsby starter project could be found in the article at: https://medium.com/humanseelabs/gatsby-v2-with-a-multi-language-search-plugin-ffc5e04f73bc --- _Source: https://npm.io/package/gatsby-plugin-lunr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._