[react-instantsearch-hooks] useHighlight is missing to customize highlights

[p-young]

Hi,

I'm changing over from using react-instantsearch-dom to react-instantsearch-hooks-web

I was previously using connectHighlight to customize the ui for an array that was being highlighted

Is there a way to do this in react-instantsearch-hooks-web? I think a useHighlight hook is needed to keep the features

I've tried looking at the Highlight component and _highlightResult directly but they don't have the information without re-parsing for the parts again.

Thanks!

[francoischalifour]

I was previously using connectHighlight to customize the ui for an array that was being highlighted

What did you customize when highlighting the array?

[p-young]

I'm using a ui library and want to wrap each item of the array in an <li> tag and some other components from the library.

The component takes all the items and joins them with a string separator, which makes it not able to be handled on a per-item basis anymore.

The connectHighlight would give you the highlight function that would break it into the parts I ended up using.

Is this something that could be turned into useHighlight?

[francoischalifour]

We hadn't planed on creating a useHighlight() Hook, but if more people need it, it may make sense.

Could you please show us your implementation on this sandbox once you're done with it? It'll help us legitimatize this use case to prioritize it.

[p-young]

I have updated the sandbox with my use case, does this work?
sandbox

I didn't implement useHighlight but showed how I used the code snippet provided by @Haroenv to get the "parts" and then use that to create a customized display.

It doesn't really do anything differently in the sandbox because the attribute used is a string and not an array, but if it were an array it would be able to wrap each line in a component that I wanted instead of using a separator (in this case, I use <li></li>)

Thanks and let me know if that helps or if you need anything else from me

[Haroenv]

The parsing is part of InstantSearch.js, but is indeed not a hook, it's regular functions:

https://github.com/algolia/react-instantsearch/blob/c674ff91212ee39e6baacee81d0d07851afd5e1f/packages/react-instantsearch-hooks-web/src/widgets/Highlight.tsx#L30-L36

[p-young]

I did end up digging and finding this too, which would be a solution

It would be nice to have a higher level solution in case the implementation changes for whatever reason, that way users can just work with react-instantsearch-hooks-web and not need to import from instantsearch.js, and the documentation and full implementation could be done just using hooks-web

If this is the recommended way or if there's another solution, and if you have any questions for me, let me know

Thanks for the quick replies!

[Haroenv]

For now this would be the recommended solution, as this code won't change, but we're considering adding useHighlight too with this code, thanks for your suggestion

[p-young]

I have it working using that code snippet, looking forward to replacing it with useHighlight.

Thanks again!