Highlight

Import#

import { Highlight } from '@chakra-ui/react'

Usage#

Render the main string as children of the Highlight component, then pass the word(s) you want to highlight to the query prop. Use the style prop to define the styles for the highlighted parts.

Highlight a word#

Usage with Heading#

The Highlight component can be used within any of the typography components. Here's an example of how to use it within Heading

Highlight with multiple words#

To highlight multiple phrases that have the same style, pass the substrings you want to highlight as an array to the query prop

The query for the strings is case insensitive. Notice "Accentuate" in the query.

Highlight substrings#

The Highlight component allows you to highlight substrings of a word. A good use case for this is in a search query.

Customizing rendered elements#

In cases where you want to customize multiple rendered elements and their styles, use the useHighlight hook.

import { useHighlight } from '@chakra-ui/react'

Props#