Highlight

Highlight is based on Chakra UI Highlight. See API-reference for Chakra UI Highlight.

Component usage

The Highlight component allows you to highlight specific text based on a query.

import { Highlight } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Highlight query="highlight">With this component, you can easily highlight text.</Highlight>;
}

⛶

Substring

import { Highlight } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Highlight query="high">You can also highlight substrings.</Highlight>;
}

⛶

Highlight multiple words

import { Highlight } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Highlight query={["highlight", "words"]}>And you can highlight multiple words</Highlight>;
}

⛶