react-highlight-hooks

A React hook to highlight words.

Inspired by react-highlight-words

Getting started

npm install --save react-highlight-hooks

import React from "react";
import { useHighlighter } from "react-highlight-hooks";

function App() {
    const {
        textToSearch,
        setTextToSearch,
        searchTerms,
        setSearchTerms,
        activeIndex,
        setActiveIndex,
        totalHighlights,
        chunks,
    } = useHighlighter({
        textToSearch: "Hello World",
        searchTerms: "hello",
    });

    // ...
}

API

useHighlighter is a React hook that returns the following:

Name	Description	Type
textToSearch	This is the body of text that you will be highlighting words from	String
setTextToSearch	This is a function to update textToSearch	Function
searchTerms	This is a space-separated list of words that you are searching for in the textToSearch	String
setSearchTerms	This is a function to update searchTerms	Function
activeIndex	This is the index of the currently-active highlighted word	Number
setActiveIndex	This is a function to update activeIndex	Function
totalHighlights	This is the number of words highlighted in textToSearch	Number
chunks	This is an array of object which describe the matches found	Array

Chunks

chunks is an array of object which describes the matches found. The objects have the following keys:

Name	Description	Type
active	If this item is highlighted and is active, this is true	Boolean
start	This is the index from the textToSearch where this chunk of text begins	Number
end	This is the index from the textToSearch where this chunk of text ends	Number
highlight	If this chunk of text is highlighted, this is true	Boolean
text	This is the chunk of text, which can be derived from the start and end indexes	String

Example chunks

import React from "react";
import { useHighlighter } from "react-highlight-hooks";

function App() {
    const { chunks } = useHighlighter({
        textToSearch: "Hello World",
        searchTerms: "hello",
    });

    console.log(chunks);
    /*
    [
        {
            highlight: true,
            active: true,
            start: 0,
            end: 5,
            text: 'Hello'
        },
        {
            highlight: false,
            active: false,
            start: 5,
            end: 11,
            text: ' world'
        }
    ]
    */
}