react-js-paginator

0.2.1 • Public • Published

npm npm npm

React-js-paginator

Simple react JS paginator

Description

Simple React JS Pagination component. Can be easily customized with CSS objects

How it looks

alt text

How to thank me? Just click on ⭐️ button :)

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i react-js-paginator

Usage

It is really easy to use, just:

Import Paginator in your react component.

import Paginator from 'react-js-paginator';

And then specify the page size, total elements and a callback function.

For example:

<Paginator
  pageSize={10}
  totalElements={64}
  onPageChangeCallback={(e) => {this.pageChange(e)}}
/>

Once the page has changed, will trigger the callback function and send back the current page.

Styles can be customized using pageBoxStyle and activePageBoxStyle props like:

pageBoxStyle={{
    border: 0, 
    color: 'black', 
    padding: 3, 
    fontSize: 16
}}
activePageBoxStyle={{
    fontWeight: 'bolder', 
    color: 'green', 
    backgroundColor: '#d7f7dc'
}}

Giving you as result:

alt text

Props

Name Type Mandatory Description
pageSize int Y How many elements will compose a page
totalElements int Y Total elements you have in store
onPageChangeCallback function Y function to be triggered when a page change happens
pageBoxStyle object N style object for each pagination box
activePageBoxStyle object N style object the active page
maxPagesToDisplay int N how many pages will be displayed at the same time in the paginator (default 6)
firstArrowAlwaysVisible present N showAlways the first page arrow
lastArrowAlwaysVisible present N showAlways the first page arrow
firstArrowSymbol string N customize first page symbol (default <<)
lastArrowSymbol string N customize last page symbol (default >>)

What's new

0.2.0

  • Package size optimized

0.2.0

  • Dependencies updated
  • Overall package size optimized

0.1.10

  • Dependencies updated

0.1.9

  • Proptypes added

0.1.8

  • Background updated to be transparent

0.1.7

  • CSS updated to be isolated under paginator class

0.1.5

  • Typecheck added, minor tweaking and styling changes

0.1.3

  • Bug fixing: last page was not always being showed.

0.1.1

  • Fixed issue where maxPagesToDisplay was showing one more page than the prop number

0.1.0

  • New default style (less ugly)
  • Style customization properties enhanced

0.0.8

  • Added props to force first and last arrows
  • Added props to customize first and last symbols

0.0.6

  • Added functionality to hide arrows if first page or last page is visible

License

Licensed under the MIT License © jciccio

Package Sidebar

Install

npm i react-js-paginator

Weekly Downloads

12

Version

0.2.1

License

MIT

Unpacked Size

26.6 kB

Total Files

9

Last publish

Collaborators

  • jciccio