Custom Suggestions

Recipe for rendering custom suggestions with DataSearch and CategorySearch components using the renderSuggestions prop.

ReactiveSearch uses the wonderful downshift for rendering dropdowns and renderSuggestions prop provides great extensibility for custom suggestions rendering. renderSuggestions is a render function which receives some parameters which you may use to build your own custom suggestions rendering

Custom Suggestions for DataSearch

<DataSearch
    ...
    renderSuggestions={
        ({
            currentValue,       // the current value in the search
            isOpen,             // isOpen from downshift
            getItemProps,       // item props to be passed to suggestions
            highlightedIndex,   // index value which should be highlighted
            suggestions,        // unmodified suggestions from Elasticsearch
            parsedSuggestions,  // suggestions parsed by ReactiveSearch
        }) => JSX
    }
/>

Check out the example on playground.

The getItemProps provides some props that you should pass to your suggestions for them to work properly with downshift. The paramter should be an object with key item which should have a value field. For example:

<div {...getItemProps({ item: { value: suggestion } })}></div>

The suggestions parameter receives all the unparsed suggestions from elasticsearch, however parsedSuggestions are also passed which can also be used for suggestions rendering.

Custom Suggestions for CategorySearch

<CategorySearch
    ...
    renderSuggestions={
        ({
            currentValue,       // the current value in the search
            isOpen,             // isOpen from downshift
            getItemProps,       // item props to be passed to suggestions
            highlightedIndex,   // index value which should be highlighted
            suggestions,        // unmodified suggestions from Elasticsearch
            parsedSuggestions,  // suggestions parsed by ReactiveSearch
            categories,         // all categories for the suggestions
        }) => JSX
    }
/>

Check out the example on playground.

All the parameters received are very similar to the DataSearch besides categories which receives all the categories for the current query as an array of objects having the key attribute and the doc_count so you can compose a custom UI accordingly.