Package Exports
- react-highlight-words
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-highlight-words) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React component to highlight words within a larger body of text.
Check out a demo here.
Usage
To use it, just provide it with an array of search terms and a body of text to highlight:
<Highlighter
highlightClassName='YourHighlightClass'
searchWords={['and', 'or', 'the']}
textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
/>And the Highlighter will mark all occurrences of search terms within the text:
Props
| Property | Type | Required? | Description |
|---|---|---|---|
| autoEscape | Boolean | Escape characters which are meaningful in regular expressions | |
| activeClassName | String | The class name to be applied to an active match. Use along with activeIndex |
|
| activeIndex | String | Specify the match index that should be actively highlighted. Use along with activeClassName |
|
| highlightClassName | String | CSS class name applied to highlighted text | |
| highlightStyle | Object | Inline styles applied to highlighted text | |
| highlightTag | String | Type of tag to wrap around highlighted matches; defaults to mark |
|
| sanitize | Function | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string |
|
| searchWords | Array |
✓ | Array of search words |
| textToHighlight | String | ✓ | Text to highlight matches in |
Installation
npm i --save react-highlight-wordsLicense
MIT License - fork, modify and use however you want.