1.0.0 • Published 5 years ago

simple-reactjs-pagination v1.0.0

Weekly downloads
2
License
ISC
Repository
-
Last release
5 years ago

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

NameTypeDefaultRequiredDescription
totalItemsNumbertrueTotal number of items to be paginated
itemsPerPageNumbertrueNo of items per page
paginationSpanNumbertrueLength of pagination bar or span
currentPageNumber1trueCurrent page number
handleChangeFunctiontrueFunction to switch between pages