Implementing the Pagination Component

Overview

In this lesson, we will be looking into how we can add pagination to our result page to improve the user experience with our search functionality.

Implementation

The Pagination component displays a pagination toolbar that allows the user to change the current page.

To add the Pagination component, we need to import it as follows:

import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
							<SearchBox/>
							<Hits hitComponent={Hit} />
                           <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};

Pagination props

• showFirst prop is about whether to show a link to the first page or not. The prop value is optional of type boolean and is set to true by default.

• showLast prop is opposite to showFirst prop which is about whether to show the last page or not. The props value is optional of type boolean and is set to true by default.

• showPrevious prop is about whether or not to display a link to the previous page. The prop value is optional of type boolean and is set to true by default.

• showNext prop is opposite to showPrevious which is about displaying a link to the next page. The value of this props is optional of type boolean and is set to true by default.

• totalPages prop allows setting a maximum number of pages to display and allows the user to navigate through them. For example, if you have 10 pages of worthy products and you set it to 4, users can not navigate to any page after 4. This prop is optional of type number and its default value is infinity.

• By default the Pagination component renders 20 hits per page, so what if we want to restrict the number of hits page, we can do so by importing the Configure component.

import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Configure,
  Pagination
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
					<InstantSearch>
				      <Configure hitsPerPage={6} />
							<SearchBox/>
							<Hits hitComponent={Hit} />
                            <Pagination />
					</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};

The Configure component allows you to provide raw search parameters to the Algolia API, which means that any props you add to the component will be forwarded to Algolia.

The prop we will use to restrict the number of hits per page is hitsPerPage, which takes a number.