react-native-highlight-text v0.2.0

react-native-highlight-text

A simple way to highlight text in React Native

Installation

npm install --save react-native-highlight-text

yarn add react-native-highlight-text

Usage

Highlight full text

import Highlight from 'react-native-highlight-text';

<Highlight highlightColor="blue" highlightTextColor="white">
  Highlight the full sentence!
</Highlight>;

Highlight specific parts of the text

import Highlight, { type HighlightSplit } from 'react-native-highlight-text';

const split: HighlightSplit[] = [
  [0, 9],
  [20, 25, 'green', 'orange'],
  [31, 40],
];

<Highlight highlightColor="blue" highlightTextColor="white" split={split}>
  Highlight different parts of a sentence!
</Highlight>;

Highlight using a RegEx

import Highlight from 'react-native-highlight-text';

<Highlight
  highlightColor="blue"
  highlightTextColor="white"
  highlightRegex={/(\d+)/g}
>
  Highlight a sentence with RegEx! 12.234.54.676
</Highlight>;

Highlight specific words

import Highlight from 'react-native-highlight-text';

<Highlight
  highlightColor="blue"
  highlightTextColor="white"
  wordMatch={['matching', 'words', 'sentence!']}
>
  Highlight matching words in a sentence!
</Highlight>;

Highlight component

If both split and highlightRegex props are not provided the full string will be highlighted

License

MIT