# Using React and Instant Search
The quickest way to get your Menu up and running on a React environment is using Algolia's [InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/). InstantSearch is a React library that encapsulates the complexities of connecting with Algolia's indexes and helps with things like searching and filtering.
#### Optional: Adding Algolia's CSS files
If you need a basic starter CSS, add the following line into the `` tag:
To have a default CSS for your project (if you don't have one yet), add the following line into the `` tag:
```html
```
Alternatively, Algolia has a theme (called "satellite") available if you prefer:
```html
```
### Setup
To get started you need to use the [``](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) component. As a bare minimum, it requires an Algolia search client and the name of the index you want to search on, such as `menu-products-demo`. Make sure you ask us to provide you the applicationID and the searchKey for your application.
Here is how to set this up:
```jsx
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';
const searchClient = algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
);
const App = () => (
{/* Components here will interact with the search state */}
);
```
Nota that only one indexName can be used at a time.
#### Building the search and display capabilities
Next step is to add the [``](https://www.algolia.com/doc/api-reference/widgets/search-box/react/) which is the input field for the search. By default, SearchBox does not need any props but there are few interesting ones such as `autofocus` and `searchAsYouType`. For more information, see [here](https://www.algolia.com/doc/api-reference/widgets/search-box/react/).
Building from the previous snippet:
```jsx
import { InstantSearch, SearchBox } from 'react-instantsearch-dom';
{...}
const App = () => (
);
```
The following step is how to display the data that we get from the search. To display the results Algolia provides the `` component. This will iterate over all the results and render a component you define and pass as a parameter.
`` will pass a parameter called `hit` which holds the entity you searched for. In this example, each `hit` is a `menu-product`.
```jsx
const ProductDisplay = ({hit}) => {(
<>
Name:
)}
const App = () => {
return (
)
};
```
That's it! You can now query and display menu products from Algolia with just a few components. \
\
In the next section we will go over some more options available for your Menu
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.iheartjane.com/jane-docs/implementing-roots/building-your-menu/using-react-and-instant-search.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.