react-fast-highlighter

react-fast-highlighter

A performant react component to highlight fragement of text

中文文档

Demo

Get Started

Under the root folder of you project

npm i -S react-fast-highlighter

In your code where you want to highlight words in a piece of text

import Highlighter from 'react-fast-highlighter'

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <Highlighter
                    text="The first second was alright, but the second second was tough."
                    highlightText="second"
                />
            </div>
        )
    }
}

The highlighted part would be wrapped in a mark tag, with highlighted classname. You can customize the highlight style by adding some CSS:

.highlighted {
  background-color: red;
}

Props

{
    /**
    * The full text to display
    * @default ""
    */
    text: PropTypes.string,

    /**
    * The part of text that needs to be highlighted
    * @default ""
    */
    highlightText: PropTypes.string,

    /**
    * CSS class name applied to highlighted text
    * @default "highlighted"
    */
    highlightClassName: PropTypes.string,

    /**
    * Search should be case sensitive; defaults to false
    * @default false
    */
    caseSensitive: PropTypes.bool,

    /**
    * Type of tag to wrap around highlighted matches
    * @default mark
    */
    highlightTag: PropTypes.string,

    /**
    * Custom class name to use on outer span
    * @default NULL
    */
    className: PropTypes.string,
}

Development

• Make sure node > 6 and npm > 3
• Install dependencies

  npm i
  

• Strat Storybook

  npm run storybook
  

• Go to localhost:6006 to see the component

Publish

The CI is configured to publish a patch version for every commit on master. However, if you need to publish manually:

Build it first

npm run build

Incement the version number

npm version minor

Then publish

npm publish

Roadmap

• Add benchmark for common highlighter libraries
• Add support for highlighting multiple words