Skip to Content
Creation UI 15.0 is released 🎉
DocsComponentsHighlighter

Highlighter

This component is used to highlight search term in word string, used in Autocomplete’s renderOption. This is simplest possible implementation of the component. It is highly recommended to use more sophisticated solution such as react-highlight-words .

Hello world

Single word in playground for simplicity

Limited customization

To customize the highlight effect, overwrite the hightlighter class.

.hightlighter { @apply font-medium bg-amber-500 rounded-sm p-0.5; }

Component API

PropDefaultDescription
searchWords—
string[]

The words to highlight

textToHighlight—
string

The text to highlight

Last updated on