Expose chunk, chunkIndex, and highlightIndex to highlightTag render prop

[pkmoran]

This change exposes the chunk, index as chunkIndex, and highlightCount as highlightIndex to the HighlightTag render prop. This is useful if a user would like to apply custom styling/colors to the chunks. It could be used like this for example:

const getHighlightTag = () => ({ children, highlightIndex }) => {
    const backgroundColors: {
        0: 'green',
        1: 'red',
        2: 'blue
    }

    return (
        <mark backgroundColor={backgroundColors[highlightIndex]}>
            {children}
        </mark>
    );
};

<Highlighter
    highlightTag={getHighlightTag()}
    searchWords={[ 'hello', 'highlight', 'text' ]}
    textToHighlight={'hello, highlight this text'}
/>

The chunk and chunkIndex props are not necessary for the above example, but I thought they may be useful for someone

[bvaughn]

Could you elaborate on a use case that requires index-based custom styling? Seems unusual to me.

[scottmontminy]

Hi @bvaughn. Thanks for taking a look at this PR for us. I'm working with @pkmoran on this problem. To add a little more context, we'd like to highlight regions of text with different colors to represent sentiment of the highlighted regions.

Here's a Codepen example: https://codepen.io/anon/pen/MZpExX

In other words, not only is the fact that text is highlighted of importance, but the color of the highlighting also has meaning to someone reading the information.

[bvaughn]

Interesting! How are you determining "sentiment" based on a numerical index though?

[scottmontminy]

We model the sentiment info upstream and transform it for the HighlightTag API.

For example, for a given block of text, our system generates an index of regions to be highlighted - each with a start and stop marker. And for each region, we are provided with a sentiment property.

[bvaughn]

I see. I'm a little confused still I guess, that you already have info about search indices, but are still using this library to search as well. Seems like the two search algorithms could potentially mismatch? Or like maybe there's a less redundant approach?

[bvaughn]

I don't really appose adding the search index, although I'm not initially a fan of adding the chunk info as well.

[pkmoran]

Hi @bvaughn so the response we get back from the upstream service is an array of matches that we need to highlight, like this:

[
    {
        sentiment: 'positive',
        startIndex: 10,
        endIndex: 20
    }
]

we use use a custom findChunks function that just maps that result to the format your library expects ([{ start: 10, end: 20 }]). Then we use the custom highlightTag similar to the example in the PR description:

const getHighlightTag = () => ({ children, highlightIndex }) => {
    const backgroundColors: {
        0: 'green',
        1: 'red',
        2: 'blue
    }

    return (
        <mark backgroundColor={backgroundColors[highlightIndex]}>
            {children}
        </mark>
    );
};

<Highlighter
    highlightTag={getHighlightTag()}
    searchWords={[ 'hello', 'highlight', 'text' ]}
    textToHighlight={'hello, highlight this text'}
/>

This library is very useful for parsing the text block and applying the highlighting.

Hopefully this makes it a bit more clear, let me know if some clarification is still needed, thanks!

I will remove the chunk and chunkIndex and only keep the highlightIndex

[bvaughn]

Published as 0.15

[scottmontminy]

Thanks @bvaughn for working through this one with us.

[bvaughn]

My pleasure

On Fri, Dec 28, 2018, 6:00 PM Scott Montminy <notifications@github.com wrote:

Thanks @bvaughn https://github.com/bvaughn for working through this one with us.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bvaughn/react-highlight-words/pull/70#issuecomment-450454663, or mute the thread https://github.com/notifications/unsubscribe-auth/AABznZG-6U0_bq6QdfUpeuhK_2QSSU7pks5u9szRgaJpZM4Zcsr9 .