# Configuring your search

Algolia provides many ways to configure and refine your search before any user interaction using the [`<Configure />`](https://www.algolia.com/doc/api-reference/widgets/configure/react/) component. Among the [many options available](https://www.algolia.com/doc/api-reference/search-api-parameters/) that this component accepts, let's see some common ones:

1. `hitsPerPage`
   * Defines the page size for pagination
2. `attributesToRetrieve`
   * Unless you want to retrieve all attributes on each query, this lets you chose the ones you want to fetch
3. `filters`
   * Filters the query based on an `attribute:value` pair

In use those would look like:

```jsx
<InstantSearch searchClient={searchClient} indexName="menu-products-demo">
  <Configure
    hitsPerPage="10"
    filters="category:indica AND kind:'vape'"
    attributesToRetrieve={["objectID", "product_id", "name", "brand"]}
  />
  {//other widgets SearchBox, Hits, etc}
</>
```

### Pagination

Pagination can be achieved out of the box in two ways: an infinite "scroll" or a classic pagination style.

#### Infinite scroll

To go with the first option we use the [`<InfiniteHits />`](https://www.algolia.com/doc/api-reference/widgets/infinite-hits/react/) component instead of the regular `<Hits />` used previously. Now, at the end of the list of items there will be a button with "**Load more"** as its text and it will load the next X hits where X is the value defined in the `hitsPerPage` on the `<Configure />`

```jsx
<InfiniteHits hitComponent={ProductDisplay} />
```

For a real infinite scrolling experience, Algolia has a [page with a tutorial](https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/infinite-scroll/react/).

![](/files/SI723jazWwqxHu4SLnGH)

#### Classic pagination

To use classic pagination Algolia Provides the [`<Pagination />`](https://www.algolia.com/doc/api-reference/widgets/pagination/react/) component. The properties available are useful to decide what buttons you want it displayed in the pagination controls.

```jsx
<InstantSearch searchClient={searchClient} indexName="menu-products-demo">
  <Pagination
    // Optional parameters
    defaultRefinement={number} // Which page is selected by default
    showFirst={boolean} // Link to first page
    showPrevious={boolean}
    showNext={boolean}
    showLast={boolean} // Link to last page
    padding={number} // How many links around current page  
    totalPages={number} 
    translations={object} // Object to set the display labels of the control
  />
/>
```

![](/files/qwKiqGEtmdgNrv6gqtl4)


---

# 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/configuring-your-search.md?ask=<question>
```

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.