A simple pagination component to use inside your react projects.
View sample code on codesandbox.
1. npm i pagination-for-reactjs-component --save
- With bootstrap design
import Pagination from 'pagination-for-reactjs-component'
import "bootstrap/dist/css/bootstrap.min.css";
- With material ui
import MuiPagination from 'pagination-for-reactjs-component/mui'
Inside your render or return
- for bootstrap
<PaginationComponent
pageCount={pageCount}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
/>
- for material ui
<MuiPagination
pageCount={pageCount}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
/>
- pageCount
(variable, type:integer), pass the value of the total number of pages or numbers for your pagination
- pageIndex
(variable, type:integer), pass the value of the current page number within your series.
- setPageIndex
(function, react hook), this hook receives intergers to pass to pageIndex for navigation
- Top style, access the
pagination
css class and implement your design - Default styling
.pagination {
display: flex;
padding-left: 0;
list-style: none;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
import { React, useState } from "react";
import Pagination from "pagination-for-reactjs-component";
import MuiPagination from "pagination-for-reactjs-component/mui";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
const [pageIndex, setPageIndex] = useState(1);
let pageCount = 200;
return (
<>
<div className="container-fluid mx-3">
<h1>You are on page {pageIndex}</h1>
<span>bootstrap design</span>
<Pagination
pageCount={pageCount}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
/>
<span>material ui design</span>
<MuiPagination
pageCount={pageCount}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
/>
</div>
</>
);
}