Approach 1 Without using the useHighlight hook

We will create Highlight Component to highlight specific part of text. We will also pass an array as query to highlight multiple parts of a text.

Chakra UI Typography Highlight Component is used to highlight any part of text. It is a perfect component to use if you want to attract user’s attention to any specific part of the text or if you want to highlight some import parts of a paragraph.

The text to highlight can be selected using the query prop of the Highlight Component while its styles prop is used to style the highlighted section of the text. If you want to highlight more than one substring then an array can also be passed to the query prop. Also the value passed to the query prop is case insensitive, i.e both w3wiki and w3wiki is same for it.

We will use the following approaches to implement Typography Highlight