react-text-highlighter/example/app.js

Simple higher order component for React for text highlighting. Works nicely with React 0.14+ and stateless components

import React, {Component} from 'react';
import Highlighter from '../lib/';

const TextComponent = ({highlightedText}) => <div dangerouslySetInnerHTML={{__html: highlightedText}}/>;
const HighlightedTextComponent = Highlighter(TextComponent);


const opts = {
  caseSensitive: true,
  highlightClass: 'highlighted-text'
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      highlight: ''
    };
  }
  handleChange = (event) => {
    this.setState({
      highlight: event.target.value
    })
  };
  render() {
    return (
        <div>
          <input type="text" onChange={this.handleChange}></input>
          <HighlightedTextComponent highlight={this.state.highlight} text={"Foo bar baz"} options={opts} />
        </div>
  );
  }
}
export default App ;