react-interactive-highlighter

A React component to select and display an arbitrary number of highlighted subsections in a text body.

A lot of other highlighter components focus on display only, and expect logic outside of the component to determine which strings should be highlighted. While react-interactive-highlighter can be used this way, it also allows creation of new highlights at runtime via text selection.

Installation

This is a standard npm package, installable with:

npm i react-interactive-highligher

or:

yarn add react-interactive-highlighter

Usage

For the most basic usage, simply provide the text block to be highlighted, and a list of highlights, which are defined by their start position in the text block and their length. (If the highlight list is empty, nothing will be highlighted.)

.highlighted {
    background-color: #d9d9d9
}

import React from 'react';
import ReactDOM from 'react-dom';
import { InteractiveHighlighter } from 'react-interactive-highlighter';
import './index.css';

class TextWithHighlights extends React.Component {
    render() {
        const text = "The sky above the port was the color of television, tuned to a dead channel."
        const highlights = [
            { startIndex: 63, numChars: 12 }
        ]
        return (
            <InteractiveHighlighter
                text={text}
                highlights={highlights}
                customClass='highlighted'
            />
        )
    }
}

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

If a selectionHandler() is provided, it will be called onMouseUp to allow new highlights to be created:

import * as React from 'react';
import ReactDOM from 'react-dom';
import { InteractiveHighlighter } from 'react-interactive-highlighter';
import './index.css';

class TextWithHighlights extends React.Component {
    constructor() {
        super();
        this.state = {
            text: "I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves...",
            highlights: []
        }
        this.selectionHandler = this.selectionHandler.bind(this);
    }

    selectionHandler(selected, startIndex, numChars) {
        this.setState({
            text: this.state.text,
            highights: this.state.highlights.push({
                startIndex: startIndex,
                numChars: numChars
            })
        })
    }

    render() {
        return (
            <InteractiveHighlighter
                text={this.state.text}
                highlights={this.state.highlights}
                customClass='highlighted'
                selectionHandler={this.selectionHandler}
            />
        )
    }
}

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

Features

• Supports multiple highlights
• Overlapping highlights are supported
• Implementation is all strongly typed

Props

Property	Type	Required?	Description
text	String	Yes	The text containing highlights.
customClass	String		CSS class used for highlighted sections ("default" if not defined). Note: Not used if customClassFn is provided.
customClassFn	Function		Callback function that takes a list of highlight indexes and returns a className to use for a given segment of text. (This lets the parent component logic choose highlighting visuals based on the substance of the data.)
highlights	List of objects	Yes	List of highlights, each defined by an object with properties startIndex (from 0) and numChars
selectionHandler	Function		Called whenever a new selection is made (via onMouseUp) - will receive the selected string, its start index in the text param, and its length.
getSelectionFn	Function		Hook to provide a mock for unit testing purposes (see tests for usage example).

Thanks

The logic for computing new highlight offsets in the presence of an existing highlight got a helpful jump-start from Dheeraj Suthar's react-highlight-selection component.

License

MIT - feel free to use, modify, or distribute as you wish.