Highlight

Usage

import { Highlight, useHighlight } from "@kanzo-tech/ui";

<Highlight query={["wyrm", "granary"]} text="A wyrm under the granary" />

Highlight splits text and wraps every match in a <mark> styled from our tokens, so it never falls back to the browser's yellow default. text must be a string; pass one query or a list.

useHighlight is the machine hook underneath — Ark's, not a context alias, so it takes the same { text, query } and returns the chunks with a match flag on each. Reach for it when the match has to be something other than a <mark>: a Badge, a link, a cell in a table.

const chunks = useHighlight({ text, query: "token" });

API Reference

Extends React.ComponentProps<"mark">; forwarded props (including className) land on each match.

HighlightProps is exported, so a wrapper can take the same props without restating them.