React components to highlight text

Usage no npm install needed!

<script type="module">
  import reactHighlightedText from '';


A highlighted text higher order component for use with React.

New version: 1.0.2

  • Fix typings
  • Fix an issue with tsc being called postinstall
  • Minor bug fixes and performance improvements
React-highlighted-text is a React higher-order component designed to be used in situations where you need to highlight some text. This was initially built as a wrapper round react-highlighter that better served the needs of our project.

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

npm install react-highlighted-text --save

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>


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

To run the example(s) clone the [repo]("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!