Using `insidePolygon` with Reach hooks v6

FAQs & Guides
1

Hi there, I was following along with your docs and got stalled as I would like to do a geosearch inside a polygon, using the react hooks, but this does not seem feasible, currently the refine function only takes a bounding box.

Any recomendations for a workaround?

2

Hi @ben.szabo, the GeoSearch widget and connector for InstantSearch is designed specifically for driving search with standard Google map, which is typically a rectangle with zoom/pan capabilities. This is why you’re not seeing support for polygons with the out-of-the-box widgets.

What’s your use case?

3

Hey @chuck.meyer, thanks for getting back to me. Since posting this I’ve learnt that I can pass insidePolygon etc, to the Configure component.

Basically I’d like to pass some latlng in the URL (?geo=lat,lng) then apply that. Well the apply part works, but Configure unlike other components just removes the param or replaces it with its default.

So atm I’m scratching my head on how to achieve that.

4

Okay, I did a bit of digging and now have a good idea as to what is happening.

I am attempting to dynamically set the aroundLatLng property on the bare<Configure /> component using routing and search params.

As mentioned before, I am using ?geo=lat,lng.

When this is the only search param, all is well, the filtering by the coordinates happen and my param remains in the URL.

If I go ahead and add another param, say discount=true which is mapped to a toggle problems start to occur.

I realised, that toggle seeing discount=true will go ahead and apply that, but with this apply it also sets the state of configure to default on render time.

This feels like an unwanted side effect – tho it may be intentional.

Is there a way for me to opt out of this behaviour?

To validate my point I tried to use setIndexUiState…

setIndexUiState(prevIndexUiState => {
      return {
        ...prevIndexUiState,
        configure: {
          ...prevIndexUiState.configure,
          aroundLatLng: prevIndexUiState.configure.aroundLatLng,
        },
        toggle: {
          ...prevIndexUiState.toggle,
          discount: event.discount,
        },
      };
    });

but this gets ignored too.