1.0.2 • Published 3 years ago
@sanar/react-native-highlight-text v1.0.2
React Native Highlight Text
React Native component used to highlight words within a larger body of text. This is a port of react-native-highlight-words.
Installation
With npm:
npm i --save @sanar/react-native-highlight-textWith yarn:
yarn add @sanar/react-native-highlight-textUsage
To use it, just provide it with an array of search terms and a body of text to highlight:
import HighlightText from '@sanar/react-native-highlight-text';
<HighlightText
highlightStyle={{ backgroundColor: 'yellow' }}
searchWords={['and', 'or', 'the']}
textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
/>;And the HighlightText component will highlight all occurrences of search terms within the text:
Props
You can pass all Text style props like style to the Text component that is used as a wrapper.
| Property | Type | Required? | Description |
|---|---|---|---|
| searchWords | Array | ✓ | Array of search words |
| textToHighlight | String | ✓ | Text to highlight matches in |
| autoEscape | Boolean | Escape characters which are meaningful in regular expressions; defaults to false | |
| caseSensitive | Boolean | Search should be case sensitive; defaults to false | |
| sanitize | Function | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string; defaults to undefined | |
| highlightStyle | Object | Styles applied to highlighted text; defaults to undefined | |
| textComponent | Component | Custom Text component to use instead of the default Text from React Native for the text. Should be TextProps compatible; defaults to undefined | |
| highlightComponent | Component | Custom Text component to use instead of the default Text from React Native for the highlight. Should be TextProps compatible; defaults to undefined |