https://github.com/metonym/react-fuzzy-highlighter

Lightweight fuzzy search highlighting component using fuse.js
https://github.com/metonym/react-fuzzy-highlighter

fusejs fuzzy highlight highlight-words react text-highlighter

Last synced: 23 days ago
JSON representation

Lightweight fuzzy search highlighting component using fuse.js

• Host: GitHub
• URL: https://github.com/metonym/react-fuzzy-highlighter
• Owner: metonym
• License: mit
• Created: 2019-07-01T00:58:18.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T02:19:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T08:43:42.956Z (about 1 month ago)
• Topics: fusejs, fuzzy, highlight, highlight-words, react, text-highlighter
• Language: TypeScript
• Homepage: https://metonym.github.io/react-fuzzy-highlighter
• Size: 1.48 MB
• Stars: 27
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-fuzzy-highlighter

> Lightweight fuzzy search highlighting component using [`fuse.js`](https://github.com/krisk/Fuse).

This component wraps `fuse.js` and provides matched and unmatched text in an iterable format.

## [Demo](https://metonym.github.io/react-fuzzy-highlighter/) · [Changelog](CHANGELOG.md)

## Install

```bash

# Yarn

yarn add react-fuzzy-highlighter

# npm

npm i react-fuzzy-highlighter

# pnpm

pnpm i react-fuzzy-highlighter

```

## Usage

```jsx

import * as React from "react";

import FuzzyHighlighter, { Highlighter } from "react-fuzzy-highlighter";

export default class extends React.Component {

  render() {

    return (

      

        {({ results, formattedResults, timing }) => {

          return (

            


              {formattedResults.map((formattedResult, resultIndex) => {

                if (formattedResult.formatted.title === undefined) {

                  return null;

                }


                return (

                  


                    

                  

                );

              })}

            

          );

        }}

      

    );

  }

}

```


## Example

The [examples](examples) folder contains the source code used for the [demo](https://metonym.github.io/react-fuzzy-highlighter).

## License

[MIT](LICENSE)