React component to highlight any text in a text. Best used to highlight search results. Really Lightweight for all the devs with bundlephobia

Installation

yarn add react-ec-highlighter

npm i --save react-ec-highlighter

Check out a demo here.

Usage

To use it, just provide it with a search phrase and a text.

Try this example in Code Sandbox.

import ECHighlighter from "react-ec-highlighter";
...

<ECHighlighter
  searchPhrase="is"
  text="Kurtis Weissnat"
/>

And the ECHighlighter will mark all occurrences of search phrase within the text:

Props

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | searchPhrase | String | ✓ | Search phrase that has to be searched for| | text | String | ✓ | Text to highlight matches in | | highlightClassName | String | | The class name to be applied to the highlighted texts | | highlightStyle | Object | | The inline style to be applied to the highlighted texts | | className | String | | CSS class name applied to the outer/wrapper <span> | | normalClassName | String | | CSS class name applied to unhighlighted text | | normalStyle | Object | | Inline styles applied to unhighlighted text | | * | any | | Any other props (such as title or data-*) are applied to the outer/wrapper <span> |

License

MIT License - fork, modify and use however you want.

Credits

Shout out to react-highlight-words and react-highlighter for inspiring me to create a simpler and a lighter version. react-highlight-words for the README and package.json. Really helped out my first react module.