React Pagination Library

 I built a very simple react pagination library with TypeScript.

react-awesome-paginate

React awesome paginate is a modern, lightweight, typescript based pagination component. You can use it in your project very easily. There are some predefined theme you can use it, in your component.

Installation

Install react-awesome-paginate with npm:

npm i react-awesome-paginate --save

Props & Theme demo: Codesandbox

API demo: Codesandbox

Preview

Default theme

Circular theme

Classic theme

Compact theme

Import and Usage rule in your component

import Pagination from 'react-awesome-paginate'; // Import npm module
import 'react-awesome-paginate/dist/index.css'; // Import CSS (You can override css styling easily.)


// In your page
<Pagination
    currentPage=1
    totalPages=20
    onPageChange={(pageNo: number) => console.log(pageNo)}
/>

Detail Usage

import React, { useState } from "React";
import Pagination from 'react-awesome-paginate';

// For CSS Styling, you have to import this below file (You can override, if you want.)

import 'react-awesome-paginate/dist/index.css';

const ExampleComponent = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPages, setTotalPages] = useState(1);


    const handlePageChange = (pageNo) => {
        if(pageNo === currentPage)
            return;

        // API Call && Set current page 
    }

    return (
        <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={(pageNo: number) => handlePageChange(pageNo)}
        />
    )
}

export default ExampleComponent;

Events

Name	Type	Status	Description
onPageChange	Function	Required	onPageChange is a Function. When event is triggerd, it gives triggered page no. as an argument.

Props

Name	Type	Status	Description
currentPage	Number	Required	currentPage number. Default value 1
totalPages	Number	Required	totalPages number. Default value 1
previousLabel	String	Optional	previousLabel for previous button. Default value Previous
nextLabel	String	Optional	nextLabel for next button. Default value Next
morePagesLabel	String	Optional	morePagesLabel for break level. Default value ...
paginationTheme	String	Optional	paginationTheme for next button. Default value default. There are four types of theme, you can use, these are default, circular, classic, compact
activeClassName	String	Optional	activeClassName for active button. Default value active. You can add your own custom class & give custom style in your component
containerClassName	String	Optional	containerClassName for active button. Default value None. You can add your own custom container class & give custom style in your component
prevClassName	String	Optional	prevClassName for active button. Default value None. You can add your own custom class & give custom style to previous button in your component
nextClassName	String	Optional	nextClassName for active button. Default value None. You can add your own custom class & give custom style to next button in your component

If you like this package please give me a star(*) in my Github Repo

If you find any issue please please report here Github Issues

Awesome React Pagination npm | Easy installation | You can do everything custom

Simple react pagination package. #react-pagination #react-awesome-paginate

#react-awesome-pagination #pagination react