Highlight text
A phrase whose matches a marker wash sweeps across
Native by default, fast by design
Usage
import { HighlightText } from "@gpuixui/components/highlight-text";
<HighlightText text="Native by default" query="native" />;API
| Prop | Type | Default |
|---|---|---|
text | string (required) | — |
query | string | — |
ranges | ReadonlyArray<readonly [number, number]> | — |
caseSensitive | boolean | false |
wholeWord | boolean | false |
stepMs | number | 60 |
color | string | findHighlight(theme).color |
activeColor | string | findHighlight(theme).activeColor |
activeIndex | number | — |
role | TextRole | "body" |
className | string | — |
style | StateStyle<HighlightTextState> | — |
Ranges
ranges names [start, end) pairs in the phrase's UTF-16 units and wins
over query. A pair is the part of it inside the phrase: a start below 0
or an end past the phrase is clamped to it, a fractional index is truncated to
the unit it names, and a pair that is not two numbers or whose ends meet after
that is no range at all. A find bar can therefore pass the ranges its own
arithmetic produced — indexOf answers -1 for no match — without sending a
negative offset to the runtime's highlight, which reads absolute units.
Edit this page on GitHubpackages/components/docs/highlight-text.mdx