Skip to content
Find and highlight words within a larger body of text πŸ–
Branch: master
Clone or download
clauderic Merge pull request #9 from schneidmaster/react-16
Add React 16 to peerDependency version range.
Latest commit fc92a66 Jun 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Sep 22, 2016
LICENSE Initial commit Sep 22, 2016
README.md Remove CodeSponsor badge Jan 15, 2018
index.js removed PropTypes from React and added import PropTypes from 'prop-ty… Nov 18, 2017
package.json Add React 16 to peerDependency version range. Apr 16, 2018

README.md

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 βœ“ 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.

You can’t perform that action at this time.