RN Highlight Words

React Native component used to highlight words within a larger body of text. This is a port of react-highlight-words.

Changelog

• [x] OnPress event added for Normal/Highlighted text

Installation

Using npm:

npm i --save rn-highlight-words

Usage

To use it, just provide it with an array of search terms and a body of text to highlight:

import Highlighter from "rn-highlight-words";

<Highlighter
    highlightStyle={{ backgroundColor: "yellow" }}
    searchWords={["and", "or", "the"]}
    textToHighlight="The dog is chasing the cat. Or perhaps they are just playing?"
    onPressNormalText={() => console.log("normal text is clickeddd!")}
    onPressHighlightedText={() => console.log("highlighted text is clickeddd!")}
/>;

And the Highlighter component will highlight all occurrences of search terms within the text:

And if you want to get highlighted text that clicked, get in onPressHighlightedText as

onPressHighlightedText = {text => console.log("highlighted text that click: " + text)}

Props

| Property | Type | Required? | Description | | :--------------------- | :------------ | :-------: | :---------------------------------------------------------------------------------------------------------------------- | | autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | | highlightStyle | Object | | Styles applied to highlighted text | | sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string | | searchWords | Array | ✓ | Array of search words | | style | Object | | Styles applied to the text wrapper | | textToHighlight | String | ✓ | Text to highlight matches in | | onPressNormalText | Function | | onPress event for normal text | | onPressHighlightedText | Function | | onPress event for highlighted text (returns text that clicked) |

License

MIT License