Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-highlight-words

clauderic13kMIT1.0.1TypeScript support: definitely-typed

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

react-native, react, reactjs, react-component, highlighter, highlight, text, words, matches, substring, occurrences, search

readme

React Native Highlight Words

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

Check out a demo using Exponent.

Installation

Using npm:

npm i --save react-native-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 'react-native-highlight-words';

<Highlighter
  highlightStyle={{backgroundColor: 'yellow'}}
  searchWords={['and', 'or', 'the']}
  textToHighlight='The dog is chasing the cat. Or perhaps they're just playing?'
/>

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

screen shot 2015-12-19 at 8 23 43 am

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<String> ✓ Array of search words
style Object | Styles applied to the text wrapper
textToHighlight String ✓ Text to highlight matches in

License

MIT License - fork, modify and use however you want.

Sponsor