React-fast-highlighter NPM

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