Highlight

Highlight specific text portions

Import: import { Highlight } from 'react-native-mantine';

Usage

import { Highlight  } from 'react-native-mantine';

// Single word
<Highlight highlight="React">
  Build apps with React Native
</Highlight>

// Multiple words
<Highlight highlight={["fast", "reliable"]}>
  Our components are fast and reliable
</Highlight>

// Custom color
<Highlight
  highlight="important"
  highlightColor="red"
>
  This is an important message
</Highlight>

Props

Prop	Type	Default	Description
`highlight` (required)	`string \| string[]`		Substring or array of substrings to highlight within the text
`children` (required)	`string`		Text in which to highlight substrings (must be a string)
`highlightColor`	`string`	`'yellow'`	Color key from theme.colors for highlighted text background
`highlightStyles`	`{ backgroundColor?: string; color?: string; }`		Custom styles for highlighted text portions (overrides highlightColor)
`style`	`TextStyle`		Additional styles to apply to the entire text
`size`	`string`		Text size from theme (inherited from Text)
`color`	`string`		Text color for non-highlighted portions
`white`	`boolean`	`false`	Sets text color to white
`bold`	`boolean`	`false`	Applies bold font weight
`semiBold`	`boolean`	`false`	Applies semi-bold font weight
`weight`	`'100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`		Font weight - numeric values from 100 (thin) to 900 (black)
`align`	`'left' \| 'center' \| 'right' \| 'justify'`		Text alignment

Source on GitHub · npm