React-highlight-hooks NPM

react-highlight-hooks

A React hook to 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'
        }
    ]
    */
}

react highlight hooks words text

highlight-words-core

@infinitebrahmanuniverse/nolb-react-hi @everything-registry/sub-chunk-2559

1.1.0

5 years ago

1.0.0

5 years ago