A custom component to highlight the searched word in a provided sentence.
npm install react-native-text-highlighter
React Native Text Highlight is a custom component to highlight the searched word in a sentence using the highlight-words-core.
``sh`
npm install react-native-text-highlighter
#### Note:
You need to make configuration on iOS and Android by following the instruction from the above dependencies libraries.
`js
import TextHighlight from 'react-native-text-highlighter';
//...
searchWords={["the", "fox"]}
fontSize={18}
/>
`stringProperties
#### Basic
| Prop | Default | Type | Optional | Description |
| :----------------- | :-----------: | :--------------: | :--------: | :------------------------------------------------ |
| textToHighlight | '' | | false | The text for the search words to match |array
| searchWords | [] | | false | The array of search words |number
| fontSize | 15 | | true | The font size of the text |string
| fontFamily | null | | true | The font family of the text |number
| numberOfLines | null | | 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 |style
| highlightTextStyle | {...} | | true | Style of the highlighted text |style
| textStyle | {...} | | true` | Style of the entire text (highlighted & not highlighted text) |
See the contributing guide to learn how to contribute to the repository and the development workflow.
---
Made with create-react-native-library