Implementing the Pagination Component
Learn how to set a number of products that appear per page instead of showing all of them together and letting the user scroll endlessly.
We'll cover the following
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 typeboolean
and is set totrue
by default. -
showLast
prop is opposite toshowFirst
prop which is about whether to show the last page or not. The props value is optional of typeboolean
and is set totrue
by default. -
showPrevious
prop is about whether or not to display a link to the previous page. The prop value is optional of typeboolean
and is set totrue
by default. -
showNext
prop is opposite toshowPrevious
which is about displaying a link to the next page. The value of this props is optional of typeboolean
and is set totrue
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 typenumber
and its default value is infinity. -
By default the
Pagination
component renders20
hits per page, so what if we want to restrict the number of hits page, we can do so by importing theConfigure
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.
Get hands-on with 1200+ tech skills courses.