Radius refinement with React InstantSearch

Hello everyone,

how can i make a aroundRadius refinement using React InstantSearch on frontend? There is no appropriate widget. Maps are only for displaying results not refining. And also I dont want the map, I just want to select radius value.

Maybe it is simple but I am new to this and still learning.

Hi @aperusic18,
The best way to pass in a query time parameter, such as aroundRadius, into our React IS components is to use the Configure widget.

The Configure widget lets you provide raw search parameters to the Algolia API and any props you add to this widget is forwarded to Algolia without rendering anything on the screen.

1 Like

Hi @maria.schreiber, this worked perfectly but I have a different problem now. How would I add my aroundRadius Configure parameter to currentRefinements? is that possible? I will need to create url search structure and this parameter will need to be referenced somehow in the url so users can share search state. I know algolia has already implemented solution for this, but as i understand it only works with standard refinement widgets.

Custom widgets are also not showing in current refinements…

It’s possible, but only by making a custom widget. Then you’ll need to implement the metadata like in the native widgets:

Sorry that this isn’t super straightforward.