1.0.5 • Published 8 months ago
react-native-text-highlighter v1.0.5
React Native Text Highlight is a custom component to highlight the searched word in a sentence using the highlight-words-core.
Support
iOS & Android
Installation
npm install react-native-text-highlighterNote:
You need to make configuration on iOS and Android by following the instruction from the above dependencies libraries.
Usage
import TextHighlight from 'react-native-text-highlighter';
//...
<TextHighlight
textToHighlight='The quick brown fox jumps over the lazy dog'
searchWords={["the", "fox"]}
fontSize={18}
/>Properties
Basic
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
| textToHighlight | '' | string | false | The text for the search words to match |
| searchWords | [] | array | false | The array of search words |
| fontSize | 15 | number | true | The font size of the text |
| fontFamily | null | string | true | The font family of the text |
| numberOfLines | null | number | true | The number of lines to render the text |
Custom styles
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
| containerStyle | {...} | style | true | Style of the container of the text |
| highlightTextStyle | {...} | style | true | Style of the highlighted text |
| textStyle | {...} | style | true | Style of the entire text (highlighted & not highlighted text) |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with create-react-native-library