react-highlighted-text

React components to highlight text

Usage no npm install needed!

<script type="module">
  import reactHighlightedText from 'https://cdn.skypack.dev/react-highlighted-text';
</script>

README

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.

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](https://github.com/admmasters/react-highlighted-text.git"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!