# react-library-paginator > React bootstrap-oriented customizable paginator component Latest version **2.0.0** (published 2018-08-26) · MIT license · 0 weekly downloads ## Install ```sh npm install react-library-paginator pnpm add react-library-paginator yarn add react-library-paginator bun add react-library-paginator ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2018-08-26 | | First published | 2018-08-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=8 | | Dependencies | 2 | | Unpacked size | 105.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | MargaretKrutikova | | Maintainers | margaretkrutikova | ## Links - npm: https://www.npmjs.com/package/react-library-paginator - Repository: https://github.com/margaretkrutikova/react-library-paginator - Homepage: https://github.com/margaretkrutikova/react-library-paginator#readme - Issues: https://github.com/margaretkrutikova/react-library-paginator/issues - npm.io page: https://npm.io/package/react-library-paginator ## Dependencies (2) - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.6 ## Recent versions - 2.0.0 (latest) — 2018-08-26 - 1.0.1 — 2018-08-19 - 1.0.0 — 2018-08-18 ## README # react-library-paginator > A React bootstrap-oriented customizable paginator component written in typescript. [![NPM](https://img.shields.io/npm/v/react-library-paginator.svg)](https://www.npmjs.com/package/react-library-paginator) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) Features included: - **Paging functionality** - tested and proven to work, will make those pages appear on the screen, - **Includes built-in styles** - default styling, for the lazy ones, - **Boostrap-friendly** - compatible with Boostrap 4, for the conservative ones, - **Customizable styles** - allows to customize styles via css classes or inline styles, for the love-to-customize-things ones, - **Customizable navigation** - allows to customize paginator navigation elements.

## Demo Check out [demo](https://margaretkrutikova.github.io/react-library-paginator/) showing a few common use-cases. ## Install ```bash npm install --save react-library-paginator ``` ## Usage ```javascript import React, { Component } from 'react'; import Paginator from 'react-library-paginator'; export default class BasicPaginator extends Component { state = { page: 1, totalItems: 120 }; handlePageChange = page => { this.setState({ page }); }; render() { const { page, totalItems } = this.state; return ( ); } } ``` ## API | Name | Type | Default | Description | | ------------------- | ---------- | ------------ | ---------------------------------------------------------------------------------------------------------------------- | | totalItems | `number` | **Required** | Total number of items that will be paginated. | | onPageChange | `function` | **Required** | Event that is triggered when the page changes. The new page number is passed into the event handler function. | | currentPage | `number` | `1` | Number of the current page. | | itemsPerPage | `number` | `10` | How many items are displayed per one page. | | maxPagesToShow | `number` | `3` | How many page numbers should be visible in the paginator between `previous` and `next` navigation symbols. | | useBootstrapClasses | `bool` | `false` | Indicates whether to apply bootstrap 4 pagination classes (e.g. `pagination`, `page-item` etc) to the paging elements. | | styles | `object` | `{}` | Object defining class names for the paging elements (see below). | | classes | `object` | `{}` | Object defining inline styles for the paging elements (see below). | | navigation | `object` | `{}` | Object customizing visibility and texts for paginator navigation elements (see below). | ### Classes and styles | Object key | Type (classes/styles) | Description | | ---------------- | --------------------- | -------------------------------------------------------------------------------- | | container | `string`/`object` | Class name/style object for the outer container (`nav`). | | list | `string`/`object` | Class name/style object for the paginator list (`ul`). | | pageItem | `string`/`object` | Class name/style object for the paginator list item (`li`). | | pageLink | `string`/`object` | Class name/style object for the link inside the list item (`a`). | | pageLinkActive | `string`/`object` | Class name/style object for the link of currently selected page. | | pageLinkDisabled | `string`/`object` | Class name/style object for the link of non-selectable pages/navigation symbols. | ### Navigation | Object key | Type | Description | | ---------------- | --------- | ------------------------------------------------------------------- | | firstPageText | `string` | Text displayed inside navigation element for the first page . | | prevPageText | `string` | Text displayed inside navigation element for the previous page. | | nextPageText | `string` | Text displayed inside navigation element for the next page . | | lastPageText | `string` | Text displayed inside navigation element for the last page . | | hideFirstPageNav | `boolean` | Indicates whether to hide navigation element for the first page. | | hidePrevPageNav | `boolean` | Indicates whether to hide navigation element for the previous page. | | hideNextPageNav | `boolean` | Indicates whether to hide navigation element for the next page . | | hideLastPageNav | `boolean` | Indicates whether to hide navigation element for the last page . | ## Contributing Contributions are welcome, bug reports, pull requests, feature requests are highly appreciated and rewarded with lightning fast responses and developing! ## License MIT © [MargaretKrutikova](https://github.com/MargaretKrutikova) --- _Source: https://npm.io/package/react-library-paginator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._