While developing the React JS application, we came up with the requirement of making the Pagination for accessing more content without going to other tabs or pages. In react-bootstrap, we have the component of Pagination that allows us to go through any page using the sequence of numbers. Along with the Pagination in react-bootstrap, we can use the ellipses (..) to indicate or represent the gap or the omission in the number of pages. This can be very helpful when there are more pages. In this article, we will see how we can use Ellipses in react-bootstrap pagination.
Prerequisite:
Steps to create React Application and Installing Bootstrap:
Step 1: Create a React application using the following command:
npx create-react-app ellipsis-page
Step 2: After creating your project folder(i.e. ellipsis-page), move to it by using the following command:
cd ellipsis-page
Step 3: Now install react-bootstrap in your working directory i.e. ellipsis-page by executing the below command in the VScode terminal:
npm install react-bootstrap bootstrap
Step 4: Now we need to Add Bootstrap CSS to the index.js or App.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
Project Structure:
Example 1: In this example, we have imported the Pagination component from the react-bootstrap and we have set the max limit of pages as 10. The following code will be written in App.js file.
// App.js import React, { useState } from "react" ;
import { Pagination } from "react-bootstrap" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
function App() {
const maxLimit = 10;
const [curr, set_Curr] = useState(1);
const pageChangeFunction = (p) => {
if (p >= 1 && p <= maxLimit) {
set_Curr(p);
}
};
const showPageItemsFunction = () => {
const data = [];
const numPage = 5;
if (maxLimit <= numPage) {
for (let i = 1; i <= maxLimit; i++) {
data.push(
<Pagination.Item
key={i}
active={i === curr}
onClick={() => pageChangeFunction(i)}
>
{i}
</Pagination.Item>
);
}
} else {
const leftside = curr - numPage / 2 > 1;
const rightside = curr + numPage / 2 < maxLimit;
data.push(
<Pagination.First
key= "first"
onClick={() => pageChangeFunction(1)}
/>
);
data.push(
<Pagination.Prev
key= "prev"
onClick={() => pageChangeFunction(curr - 1)}
/>
);
if (leftside) {
data.push(<Pagination.Ellipsis key= "leftEllipsis" />);
}
const str = Math.max(1, Math.round(curr - numPage / 2));
const end = Math.min(maxLimit, Math.round(curr + numPage / 2));
for (let i = str; i <= end; i++) {
data.push(
<Pagination.Item
key={i}
active={i === curr}
onClick={() => pageChangeFunction(i)}
>
{i}
</Pagination.Item>
);
}
if (rightside) {
data.push(<Pagination.Ellipsis key= "rightEllipsis" />);
}
data.push(
<Pagination.Next
key= "next"
onClick={() => pageChangeFunction(curr + 1)}
/>
);
data.push(
<Pagination.Last
key= "last"
onClick={() => pageChangeFunction(maxLimit)}
/>
);
}
return data;
};
return (
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<Pagination>{showPageItemsFunction()}</Pagination>
<p>GFG Page: {curr}</p>
</div>
);
} export default App;
|
Output:
Example 2: In this example, we have used the Pagination component and also the Ellipsis (…) feature. There is an input field in which the user can enter the page number to which he wants to go.
import React, { useState } from "react" ;
import { Pagination, Form, Button } from "react-bootstrap" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import "./App.css" ;
function App() {
const maxLimit = 10;
const [curr, setCurr] = useState(1);
const [goto, setgoTo] = useState(1);
const [valid, setValid] = useState( true );
const pageChangeFunction = (p) => {
if (p >= 1 && p <= maxLimit) {
setCurr(p);
}
};
const showPageItemsFunction = () => {
const data = [];
const numPage = 5;
let leftSide = curr - numPage / 2 > 1;
let rightSide = curr + numPage / 2 < maxLimit;
if (leftSide && rightSide) {
leftSide = curr - numPage / 2 > 2;
rightSide = curr + numPage / 2 < maxLimit - 1;
}
data.push(
<Pagination.First
key= "first"
onClick={() => pageChangeFunction(1)}
/>
);
data.push(
<Pagination.Prev
key= "prev"
onClick={() => pageChangeFunction(curr - 1)}
/>
);
if (leftSide) {
data.push(
<Pagination.Ellipsis
key= "leftEllipsis"
className= "ellipsis"
onClick={() => pageChangeFunction(curr - numPage)}
/>
);
}
const str = Math.max(1, Math.round(curr - numPage / 2));
const end = Math.min(maxLimit, Math.round(curr + numPage / 2));
for (let i = str; i <= end; i++) {
data.push(
<Pagination.Item
key={i}
active={i === curr}
onClick={() => pageChangeFunction(i)}
>
{i}
</Pagination.Item>
);
}
if (rightSide) {
data.push(
<Pagination.Ellipsis
key= "rightEllipsis"
className= "ellipsis"
onClick={() => pageChangeFunction(curr + numPage)}
/>
);
}
data.push(
<Pagination.Next
key= "next"
onClick={() => pageChangeFunction(curr + 1)}
/>
);
data.push(
<Pagination.Last
key= "last"
onClick={() => pageChangeFunction(maxLimit)}
/>
);
return data;
};
const gotoFunction = () => {
if (goto >= 1 && goto <= maxLimit) {
setCurr(goto);
setValid( true );
} else {
setValid( false );
}
};
return (
<div className= "app-container" >
<h1 className= "header" >GeeksforGeeks</h1>
<Pagination className= "pagination" >
{showPageItemsFunction()}
</Pagination>
<div className= "jump-to-page" >
<Form.Control
type= "number"
min= "1"
max={maxLimit}
value={goto}
onChange={(e) => {
setgoTo(parseInt(e.target.value));
setValid( true );
}}
isInvalid={!valid}
/>
<Button variant= "primary" onClick={gotoFunction}>
Go
</Button>
</div>
<p className= "page-info" >
GFG Page: {curr} of {maxLimit}
</p>
</div>
);
} export default App;
|
/* App.css */ .app-container { text-align : center ;
padding : 20px ;
} .header { color : green ;
font-size : 24px ;
margin-bottom : 20px ;
} .pagination { display : flex;
justify- content : center ;
align-items: center ;
} .pagination .page-item { margin : 0 3px ;
font-size : 18px ;
} .ellipsis { font-size : 18px ;
color : #777 ;
margin : 0 6px ;
cursor : pointer ;
transition: color 0.3 s ease;
} .jump-to-page { margin-top : 10px ;
display : flex;
justify- content : center ;
align-items: center ;
} .jump-to-page input { margin-right : 10px ;
} .page-info { font-size : 18px ;
margin-top : 20px ;
} .is-invalid input { border-color : #f00 ;
} .is-invalid .btn-primary { border-color : #f00 ;
color : #f00 ;
} .is-invalid .btn-primary:hover { background-color : #f00 ;
color : #fff ;
} |