react-highlight-hooks

    1.1.0 • Public • Published

    Travis build status Codecov branch npm downloads MIT License

    gzip size size

    Maintainability PRs Welcome

    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'
            }
        ]
        */
    }

    Install

    npm i react-highlight-hooks

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar