https://github.com/ninsau/react-pagination-component
A simple pagination component to use inside your react projects
https://github.com/ninsau/react-pagination-component
pagination-component pagination-library react-pagination reactjs
Last synced: 2 months ago
JSON representation
A simple pagination component to use inside your react projects
- Host: GitHub
- URL: https://github.com/ninsau/react-pagination-component
- Owner: ninsau
- Created: 2021-07-01T12:10:34.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T18:51:05.000Z (almost 5 years ago)
- Last Synced: 2025-06-07T05:35:53.809Z (about 1 year ago)
- Topics: pagination-component, pagination-library, react-pagination, reactjs
- Language: JavaScript
- Homepage: https://csb-pg8kq-g5szse1c7-ninsau.vercel.app/
- Size: 9.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-pagination-component
A simple pagination component to use inside your react projects.
## Demo
[Demo](https://csb-pg8kq-g5szse1c7-ninsau.vercel.app/)
View sample code on [codesandbox](https://codesandbox.io/s/pagination-for-reactjs-pg8kq?file=/src/App.js).
## How to use
### Install
```
1. npm i pagination-for-reactjs-component --save
```
### 2. Import pagination component inside react
- 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'
```
### 3. Call the pagination function and pass parameters
Inside your render or return
- for bootstrap
```
```
- for material ui
```
```
### 4. Definitions
- 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
```
### 5. Custom styling
- 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;
}
```
### 6. Sample Code
```
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 (
<>
You are on page {pageIndex}
bootstrap design
material ui design
>
);
}
```