React-autosuggest: Access highlighted suggestion from renderSuggestion

[mkaemmerer]

In my application, I use css-modules for styling. I also want to style highlighted suggestions differently from non-highlighted suggestions.

Unfortunately, I can't do this without breaking encapsulation, because the highlight class react-autosuggest__suggestion--highlighted is applied to a list item within <Autosuggest>, not to my <Suggestion> component.

I propose passing either highlightedSuggestion, or an isHighlighted flag torenderSuggestion as an additional argument. This way my <Suggestion> component would be able to style itself based on whether or not it was highlighted.

[mkaemmerer]

Another possible solution would be to allow users of react-autowhatever and react-autosuggest pass in an onHighlightedItemChange property. This way, the parent component could maintain its own state for highlightedSuggestion, and use this state within renderSuggestion.

This seems to be the approach taken in https://github.com/moroshko/react-autosuggest/pull/339

[moroshko]

I like the idea of adding isHighlighted to renderSuggestion, so the signature becomes:

function renderSuggestion(suggestion, { isHighlighted, query })

Would you like to submit a PR?

[mkaemmerer]

Yes, sounds good to me. I'll put together a PR soon.