1.0.1 • Published 4 years ago
@devugo/reactjs-pagination v1.0.1
ReactJS Pagination
A simple React Pagination for your web applications. Render this components to manage pagiantions betweeen data
Installation
install reactjs-pagination with npm
$ npm install --save @devugo/reactjs-pagination
Usage
This component is very easy to use and user friendly. Just provide the required props and you are good to get your pagination rendered!
import React, { useState } from 'react';
import ReactDom from 'react-dom';
import Pagination from '../components/Pagination';
import { data } from './data';
let itemPerPage = 3;
let paginationSpan = 3;
let totalItems = data.length;
const Example = props => {
const [currentPage, setCurrentPage] = useState(1);
const handleChange = value => {
setCurrentPage(value);
}
return (
<div>
<Pagination
totalItems={totalItems}
itemsPerPage={itemPerPage}
paginationSpan={paginationSpan}
currentPage={currentPage}
handleChange={handleChange}
/>
</div>
)
}
ReactDom.render(<Example />, document.getElementById("example-root"));
Component Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
totalItems | Number | true | Total number of items to be paginated | |
itemsPerPage | Number | true | No of items per page | |
paginationSpan | Number | true | Length of pagination bar or span | |
currentPage | Number | 1 | true | Current page number |
handleChange | Function | true | Function to switch between pages |