API Reference / React InstantSearch / Control

Control

Signature 
<Control
  // Optional parameters
  translations={object}
/>
Import
Copy 
1

import { Control } from 'react-instantsearch-dom-maps';
See code examples
See live example

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

The Control widget allows the user to control the different strategies for the refinement (enable/disable refine on map move).

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import {
  GoogleMapsLoader,
  GeoSearch,
  Control,
  Marker,
} from 'react-instantsearch-dom-maps';

<div style={{ height: 500 }}>
  <GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
    {google => (
      <GeoSearch google={google}>
        {({ hits }) => (
          <div>
            <Control />
            {hits.map(hit => (
              <Marker key={hit.objectID} hit={hit} />
            ))}
          </div>
        )}
      </GeoSearch>
    )}
  </GoogleMapsLoader>
</div>

Props

translations
type: object
Optional

A mapping of keys to translation values.

  • control: the label of the radio button.
  • redo: the label of the redo button.
Copy 
1
2
3
4
5
6

<Control
  translations={{
    control: 'Search as I move the map',
    redo: 'Redo search here',
  }}
/>
Did you find this page helpful?
React InstantSearch v6