Highlight
Highlight emphasizes matching fragments inside longer strings, reusing the Text component so typography settings stay consistent across platforms.
Source
LLM docs
Package
Examples
4
Properties
65
Playground
Basics
Default highlight behavior with a single search term. Matching fragments are wrapped with the theme-aware highlight styles.
Loading demo…
import { View } from 'react-native';
import { Highlight, Text } from '@plocks/ui';
const PARAGRAPH = 'Highlight This, definitely THIS and also this!';
export function Demo() {
return (
<View>
<Text variant="h5">Case-insensitive match</Text>
<Highlight highlight="this">{PARAGRAPH}</Highlight>
</View>
);
}Variants
Use semantic text variants without changing which phrase is highlighted.
Loading demo…
import { Column, Highlight, Text } from '@plocks/ui';
const variants = ['h4', 'p', 'small'] as const;
export function Demo() {
return (
<Column gap="md">
{variants.map(variant => (
<Column key={variant} gap="xs">
<Text size="xs" c="secondary">{variant}</Text>
<Highlight variant={variant} highlight="design">A design system for every screen.</Highlight>
</Column>
))}
</Column>
);
}Multiple
Pass an array to highlight several distinct substrings. Every match shares the same styles by default.
Loading demo…
import { View } from 'react-native';
import { Highlight, Text } from '@plocks/ui';
const SENTENCE = 'plocks brings patterns, blocks, and building tools together.';
export function Demo() {
return (
<View>
<Text variant="h5">Multiple values</Text>
<Highlight highlight={['blocks', 'tools']}>{SENTENCE}</Highlight>
</View>
);
}Styles
Swap the marker color with the
highlightColor prop, passing any theme palette name. The default marker style (yellow background, unchanged text) is preserved.Loading demo…
import { Highlight, Text, Block } from '@plocks/ui';
const copy = 'You can switch the highlight color while keeping the default marker style.';
export function Demo() {
return (
<Block>
<Text variant="h5">Highlight color</Text>
<Highlight highlight="highlight" highlightColor="highlight">{copy}</Highlight>
<Highlight highlight="color" highlightColor="teal">{copy}</Highlight>
<Highlight highlight="marker" highlightColor="pink">{copy}</Highlight>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources