How to use the react-bootstrap pagination component?

React bootstrap is a component-based library that provides bootstrap features as react components, Today, We will learn how to integrate the bootstrap pagination component in react applications.

You can download the working example of the pagination component https://github.com/technostuf/react-bootstrap-pagination-demo

Create a React application
Install react-bootstrap library
Add code to the file
Run a React application

Create a React application

Create a React app using the below command.

  npx create-react-app react-bootstrap-pagination-demo

The above command will create a new folder with the app name so you need to move into that folder, use the below command to change the directory.

 cd react-bootstrap-pagination-demo

Install react-bootstrap library

After creating react app we need to install react-bootstrap and bootstrap from npm or yarn. the following command will install react-bootstrap and bootstrap package into the application. if you have already installed then skip it.

 npm install --save react-bootstrap bootstrap
 OR using yarn
 yarn add react-bootstrap bootstrap

Add code to the file

Create a component file PaginationComponent.js to hold the pagination code, then we need to import it into App.js.

import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
import Pagination from 'react-bootstrap/Pagination';

const PaginationComponent = () => {
    let selected = 1;
    let items = [];
    for (let page = 1; page <= 7; page++) {
        items.push(
            <Pagination.Item key={page} active={page === selected}>
                {page}
            </Pagination.Item>,
        );
    }
    return (
        <div>
            <Pagination>{items}</Pagination>
        </div>
    )
}
export default PaginationComponent;

Change Pagination Size

Use the size attribute to change pagination component size

<Pagination size="lg">{items}</Pagination> // Large size
<Pagination size="sm">{items}</Pagination> // Small size

Finally, you have to import both files into App.js

import './App.css';
import PaginationComponent from './PaginationComponent';
function App() {
  return (
    <div className="App">
      <h1>React bootstrap pagination example - technostuf.com</h1>
      <PaginationComponent />
    </div>
  );
}
export default App;

Run a React application

Run the React application using the following command.

  npm start

After compilation, the program opens your browser and runs http://localhost:3000/

Output

You can download the working example of pagination.

https://github.com/technostuf/react-bootstrap-pagination-demo