Highlight

Совпадения поиска в тексте: без учёта регистра и диакритики, несколько терминов своими цветами, готовые диапазоны, текущее совпадение. Бесплатно, MIT · Базовые элементы › Текст и иконки

Установка

npx valyro-cli@latest add highlight

npx shadcn@latest add https://valyro.xyz/r/highlight.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Highlight } from 'valyro-ui';

Пропсы

Prop	Type	Default
`children` *	`string`		The text to search in.
`query`	`string \| readonly string[]`		One term or several (each may get its own `tone`). Empty or blank: plain text.
`ranges`	`readonly TextRange[]`		Ready-made hit ranges `[start, end]` (a fuzzy search, server hits); they win over `query`.
`ignoreCase`	`boolean`	`true`	Default true.
`ignoreAccents`	`boolean`	`true`	"елка" finds "Ёлка", "cafe" finds "Café". Default true, as the kit's Select and Combobox filter.
`wholeWord`	`boolean`	`false`	Only whole words (any script).
`first`	`boolean`	`false`	Mark only the first hit.
`tone`	`HighlightTone \| readonly HighlightTone[]`	`'accent'`	Colour of the marks; an array gives each query term its own (cycling). Default `accent`.
`current`	`number`		Index of the current hit (find in page): it gets the strong colour and `data-current`.
`locale`	`string`		Locale for case folding (Turkish İ).
`announce`	`boolean`	`false`	Screen readers do not announce <mark>: wrap each hit in hidden "highlight start / end" words.
`labels`	`Partial<HighlightLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Highlight

Установка

Пропсы

Похожие компоненты