react-highlight-string

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