react-interactive-highlighter
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

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'));

static example

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'));

dynamic example

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.

Package Sidebar

Install

npm i react-interactive-highlighter

Weekly Downloads

36

Version

0.3.1

License

MIT

Unpacked Size

1.83 MB

Total Files

33

Last publish

Collaborators

  • jrheling