Paginoid

A ReactJS dumb component to render a pagination.

• a small function
• implemented in typescript
• no dependencies

Installation

    #npm
    $ npm install paginoid
    
    #yarn
    $ yarn add paginoid

Usage

import React from 'react';
import Paginoid from 'paginoid';

export const App = (): JSX.Element => {
  const [currentPage, setCurrentPage] = useState(1);
  const handleChange = (page: number) => setCurrentPage(page);

  return (
    <div className='app'>
      <Paginiod
        currentPage={currentPage}
        total={150}
        perPage={3}
        handleChange={handleChange}

        prevButtonTitle={<span>{'<'}</span>}
        nextButtonTitle={<span>{'>'}</span>}

        containerClassName={'pagination'}
        arrowsClassName={'pagination_arrows'}
        itemsClassName={'pagination_item'}
        activeItemClassName={'pagination_item__active'}
        disabledArrowClassName={'pagination_arrows__disable'}
      />
    </div>
  );
};

Params

• currentPage: number (required);
• total: number (required) - total items;
• perPage: number (required) - items per page;
• handleChange: (currentPage: number) => void (required);
• prevButtonTitle?: ReactNode;
• nextButtonTitle?: ReactNode;
• containerClassName?: string;
• arrowsClassName?: string;
• itemsClassName?: string;
• activeItemClassName?: string;
• disabledArrowClassName?: string;

Watch Demo