SearchBox
<SearchBox // Optional parameters defaultRefinement={string} autoFocus={boolean} searchAsYouType={boolean} showLoadingIndicator={boolean} submit={React.Node} reset={React.Node} loadingIndicator={React.Node} focusShortcuts={string[]} onSubmit={function} onReset={function} on*={function} translations={object} />
About this widget
The SearchBox
widget is used to let the user perform a text-based query.
This usually is the main entry point to start the search in an InstantSearch context. It is usually placed at the top of a search experience, so that the user can start searching right away.
Examples
1
2
3
import { SearchBox } from 'react-instantsearch-dom';
<SearchBox />
Props
defaultRefinement | type: string Optional Provides a default refinement value when component is mounted. | ||
Copy
| |||
autoFocus | type: boolean default: false Optional Whether the search box must be focused on render. | ||
Copy
| |||
searchAsYouType | type: boolean default: true Optional Whether a search needs to be made on every change to the query. If | ||
Copy
| |||
showLoadingIndicator | type: boolean default: false Optional Displays that the search is loading. This only happens after a certain amount of time to avoid a blinking effect. The timer can be configured with the | ||
Copy
| |||
submit | type: React.Node Optional Changes the apparence of the default submit button (magnifying glass). | ||
Copy
| |||
reset | type: React.Node Optional Changes the apparence of the default reset button (cross). | ||
Copy
| |||
loadingIndicator | type: React.Node Optional Changes the apparence of the default loading indicator (spinning circle). | ||
Copy
| |||
focusShortcuts | type: string[] default: ['s','/'] Optional A list of keyboard shortcuts that focus the search box. Accepts key names and key codes. | ||
Copy
| |||
onSubmit | type: function Optional Intercepts | ||
Copy
| |||
onReset | type: function Optional Intercepts | ||
Copy
| |||
on* | type: function Optional Listens to any event sent from the | ||
Copy
| |||
translations | type: object Optional A mapping of keys to translation values.
| ||
Copy
|
Customize the UI
If you want to create your own UI of the SearchBox
widget or use another UI library, you can use connectors.
Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.
They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.
It’s a 3-step process:
// 1. Create a React component
const SearchBox = () => {
// return the DOM output
};
// 2. Connect the component using the connector
const CustomSearchBox = connectSearchBox(SearchBox);
// 3. Use your connected widget
<CustomSearchBox />
Create a React component
const SearchBox = ({
string currentRefinement,
boolean isSearchStalled,
function refine,
}) => {
// return the DOM output
};
Provided Props
currentRefinement | type: string The current query. | ||
Copy
| |||
isSearchStalled | type: boolean Whether InstantSearch has detected that searches are stalled. | ||
Copy
| |||
refine | type: function Changes the current query. | ||
Copy
|
Create and instantiate your connected widget
const CustomSearchBox = connectSearchBox(SearchBox);
<CustomSearchBox
// optional parameters
defaultRefinement={string}
/>
Exposed Props
defaultRefinement | type: string Optional Provides a default value for the query. | ||
Copy
|
Full example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { connectSearchBox } from 'react-instantsearch-dom';
const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (
<form noValidate action="" role="search">
<input
type="search"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
/>
{isSearchStalled ? 'My search is stalled' : ''}
</form>
);
const CustomSearchBox = connectSearchBox(SearchBox);
1
<CustomSearchBox defaultRefinement="iphone" />