A simple React component to highlight and retrieve selected text.

Usage no npm install needed!

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


React Highlight Selection

React component to highlight and retrieve text selected with mouse.


npm i react-highlight-selection


Edit ReactHighlightSelection

  • Provide required text prop. This will be the text contained inside the component.
  • Highlight the required portion of text by dragging the mouse over it with left-button pressed. The text would be highlighted on button's release
  • Optionally, provide a custom class to give your own background color or any other styling.
  • Optionally, provide a call back function selectionHandler. An object containing the following will be returned to the function
    • selected text
    • selection start index
    • selection end index
.custom-class {
  background-color: #e06f6f
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SelectionHighlighter from 'react-highlight-selection';
import './App.css';

class App extends Component {
  constructor() {
    this.selectionHandler = this.selectionHandler.bind(this);

  selectionHandler(selection) {
    //do something with selection

  render() {
    const text = "Let there be light, let there be Sun.";
    return (

ReactDOM.render(<App />, document.getElementById('root'));

What's unique

  • It's a very simple and lightweight component.
  • Most other existing components highlight only given text (somewhat like search/replace). This component, however, helps in retrieving dynamic selection done with the mouse.