The <Configure> component allows you to set search parameters declaratively. It’s a declarative way to configure the search query.
Import
import { Configure } from 'react-instantsearch';
Props
The <Configure> component accepts all Algolia search parameters as props.
Common Parameters
Number of hits to retrieve per page.<Configure hitsPerPage={20} />
Filter the search results using filter expressions.<Configure filters="category:shoes AND price < 100" />
facetFilters
string | string[] | string[][]
Filter the search by facet values.<Configure facetFilters={[["brand:Apple", "brand:Samsung"], "category:phones"]} />
numericFilters
string | string[] | string[][]
Filter the search by numeric values.<Configure numericFilters={["price >= 10", "price <= 100"]} />
Attributes to retrieve from the index.<Configure attributesToRetrieve={["name", "description", "price", "image"]} />
Attributes to highlight in the results.<Configure attributesToHighlight={["name", "description"]} />
Attributes to snippet in the results.<Configure attributesToSnippet={["description:20"]} />
Tag to use before highlighted parts.<Configure highlightPreTag="<mark>" highlightPostTag="</mark>" />
Tag to use after highlighted parts.
Enable de-duplication or grouping of results.<Configure distinct={true} />
Enable or disable analytics.<Configure analytics={true} />
Enable click analytics.<Configure clickAnalytics={true} />
Enable personalization.<Configure enablePersonalization={true} />
User token for personalization and analytics.<Configure userToken="user-123" />
Search around a specific location (latitude, longitude).<Configure aroundLatLng="37.7749,-122.4194" aroundRadius={5000} />
Radius in meters for geo search.
Examples
Basic Configuration
import { InstantSearch, Configure, SearchBox, Hits } from 'react-instantsearch';
function App() {
return (
<InstantSearch searchClient={searchClient} indexName="products">
<Configure
hitsPerPage={12}
attributesToRetrieve={['name', 'description', 'price', 'image']}
attributesToHighlight={['name', 'description']}
/>
<SearchBox />
<Hits />
</InstantSearch>
);
}
Filtering Results
function App() {
return (
<InstantSearch searchClient={searchClient} indexName="products">
<Configure
filters="category:electronics AND in_stock:true"
hitsPerPage={20}
/>
<SearchBox />
<Hits />
</InstantSearch>
);
}
Geo Search
function App() {
const [userLocation, setUserLocation] = useState(null);
useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
setUserLocation(
`${position.coords.latitude},${position.coords.longitude}`
);
});
}, []);
return (
<InstantSearch searchClient={searchClient} indexName="restaurants">
{userLocation && (
<Configure
aroundLatLng={userLocation}
aroundRadius={5000}
/>
)}
<SearchBox />
<Hits />
</InstantSearch>
);
}
Conditional Configuration
function App() {
const [showOnlyInStock, setShowOnlyInStock] = useState(false);
return (
<InstantSearch searchClient={searchClient} indexName="products">
<Configure
filters={showOnlyInStock ? 'in_stock:true' : ''}
hitsPerPage={20}
/>
<label>
<input
type="checkbox"
checked={showOnlyInStock}
onChange={(e) => setShowOnlyInStock(e.target.checked)}
/>
Show only in stock
</label>
<SearchBox />
<Hits />
</InstantSearch>
);
}
Per-Index Configuration
import { InstantSearch, Index, Configure, Hits } from 'react-instantsearch';
function App() {
return (
<InstantSearch searchClient={searchClient} indexName="products">
{/* Global configuration */}
<Configure hitsPerPage={10} />
<Index indexName="products">
{/* Override for this index */}
<Configure hitsPerPage={5} filters="featured:true" />
<Hits />
</Index>
<Index indexName="articles">
{/* Different configuration for articles */}
<Configure hitsPerPage={3} />
<Hits />
</Index>
</InstantSearch>
);
}
Notes
The <Configure> component doesn’t render anything to the DOM. It only configures the search parameters.
When using multiple <Configure> components, later ones override earlier ones for the same parameters. Use this behavior intentionally for conditional configurations.