react-pagination-lite

Description

A light weight react pagination component built using react hooks and styled using flex layout.It comes with minimal pagination, css configuration.

Features

• Customizable
• Responsive
• SSR support
• Does not rely on additional css reference other than configuration

Demo

https://hdhami.github.io/react-pagination-lite.html

Installing as a package

npm install react-pagination-lite --save

Usage

import React, { useState } from 'react';
import { render } from 'react-dom';
import Pagination from 'react-pagination-lite';

const PaginationDemo = () => {
    const [activePage, setActivePage] = useState(1);

    return (
        <Pagination
            range={3}
            activePage={activePage}
            totalCount={27}
            itemsPerPage={5}
            onPaginate={pageId => {
                setActivePage(pageId);
            }}
            styles={{
                navigationBtns: {
                    activeIconColor: '#000',
                    inactiveIconColor: '#b5b5b5',
                    borderColor: '#eeeeee'
                },
                paginationCells: {
                    padding: '0 12px',
                    activeBgColor: '#92a772',
                    inactiveBgColor: '#f2f2f2',
                    textColor: '#000000'
                }
            }}
        />
    );
};

render(<PaginationDemo />, document.getElementById('root'));

| Attributes | Type | Default | Description | | :----------- | :--------: | :----------------------------------------------------: | :------------------------------------------------ | | range | number | 3 | number of pagination blocks to be shown at a time | | activePage | number | 1 | active page id | | totalCount | number | | total number of records to be shared across pages | | itemsPerPage | `number` | `5` | records to be shown on a page | | onPaginate | `function` | | callback to be invoked on page change | | styles | object | `` | styles for pagination cell, next, prev navigation |

=======================

Contributing

=======================

Raising issues

=======================

License

Please see LICENSE for details.