react-highlighted-text

React components to highlight text


Keywords
react, highlighted, text, hilighter
License
MIT
Install
npm install react-highlighted-text@1.0.2

Documentation

A highlighted text higher order component for use with React.

New version: 0.1.0

  • React 15.x compatibility
  • Fix more issues with highlighting children
React-highlighted-text is an open-source component designed to be used in situations where you need to highlight some text in one of the child components. This was built as a wrapper on react-highlighter that better served the needs of our project.

Installation:
The easiest way to install the component is to use NPM and insert into your React build process:

npm install react-highlighted-text --save

Usage:
To use the component (ES6 module syntax):


import highlightedText from 'react-highlighted-text'

const TextWrapper = props => <div>{ props.children }</div>
const HighlightedText = highlightedText(TextWrapper)

const Example = props => <HighlightedText highlightedText="Gon" >Gon & Killua</HighlightedText>

PropTypes:

ReactHighlightedText.propTypes = {
  highlightedText: PropTypes.string,
  matchClass: PropTypes.string,
}

Examples
To run the example(s) clone the repo and then use NPM scripts to start a dev server at http://localhost:8080/:


npm install
npm start

We are PR friendly - please get involved!