2.0.2 • Published 1 year ago
react-highlight-string v2.0.2
Tiny react component to highlight given string in text. Written in TypeScript. Based on highlight-string.
Sandbox with code example.
Usage
Just pass a text and an array of strings to search for.
import ReactDOM from 'react-dom/client'
import { Highlighter } from 'react-highlight-string'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<Highlighter text="Hello word" substrings={['hello']} />,
)API
Highlighter
| Parameter | Type | Description |
|---|---|---|
| text | string | Text to search and highlight. Required. |
| substrings | Array<string> | Array of strings to search for. Required. |
| caseSensitive | boolean | Pass true if search should be case sensitive. false by default. |
| sanitize | (text: string) => string | Sanitize function. |
| activeClassName | string | The class name to be applied to an active match. Use along with activeIndex. |
| activeIndex | number | Specify the match index that should be actively highlighted. Use along with activeClassName. |
| activeStyle | CSSProperties | The inline style to be applied to an active match. Use along with activeIndex. |
| className | string | CSS class name applied to the outer/wrapper span. |
| highlightClassName | string | CSS class name applied to highlighted text or object mapping search term matches to class names. |
| highlightStyle | CSSProperties | Inline styles applied to highlighted text. |
| highlightComponent | keyof ReactHTML \| ComponentType<HighlightComponentProps> | Type of tag to wrap around highlighted matches. Defaults to mark but can also be a React component (class or functional). |
| unhighlightClassName | string | CSS class name applied to unhighlighted text. |
| unhighlightStyle | CSSProperties | Inline styles applied to unhighlighted text. |
| unhighlightComponent | keyof ReactHTML \| ComponentType<HTMLAttributes<Element>> | Type of tag applied to unhighlighted parts. Defaults to React Fragment but can also be a React component (class or functional). |
| * | Any other html attribute for wrapper span. |
HighlightComponent
| Parameter | Type | Description |
|---|---|---|
| activeIndex | number | Passed from parent component. |
| highlightIndex | number | Passed from parent component. |
| className | string | CSS class or classes that will contain activeClassName and highlightClassName if they were provided. Passed from parent component. |
License
MIT