Highlight - Chakra Ui

Usage

jsx

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

jsx

<Highlight query="Hello">Hello World</Highlight>

Pass an array of strings to the query prop to highlight multiple substrings.

Use the styles prop to customize the style of the highlighted text.

Use the highlight component to highlight search query results.

Here's an example of how to render a custom squiggle image around the highlighted text. Useful for a more fancy effect.