A React component that captures the browser ctrl+f.

Searchable.jsx

import React from 'react';


class Searchable extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      'text': 'This is some text.',
      'highlighted': 'This is some text.'
    };

    this.captureSearch = this.captureSearch.bind(this);
  }

  searchText(query) {
      if (query.length == 0) return [];

      var startIndex = 0, index, indices = [], reconstituted = "";

      const doc = this.state.text.toLowerCase();

      while ((index = doc.indexOf(query.toLowerCase(), startIndex)) > -1) {
        reconstituted += this.state.text.slice(startIndex, index);
        reconstituted += "<b>";
        reconstituted += this.state.text.slice(index, index+query.length);
        reconstituted += "</b>";

        startIndex = index + query.length;
      }

      reconstituted += this.state.text.slice(startIndex);

      this.setState({ 'highlighted': reconstituted })
  }

  captureSearch(e) {
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
      e.preventDefault();
      this.searchBar.focus();
    }
  }

  componentDidMount() {
    window.addEventListener("keydown", this.captureSearch);
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.captureSearch);
  }

  render() {
    return (
      <div>
        <input type="text"
          ref={(input) => { this.searchBar = input; }}
          onChange={(e) => this.searchText(e.target.value)} /><br /><br />
        <div className="text" dangerouslySetInnerHTML={{
          __html: this.state.highlighted
        }}>
        </div>
      </div>
    );
  }
}


function App() {
  return (
    <div className="App">
      <Searchable />
    </div>
  );
}

export default App;