react-library-paginator

A React bootstrap-oriented customizable paginator component written in typescript.

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 showing a few common use-cases.

Install

npm install --save react-library-paginator

Usage

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 (
      <Paginator
        totalItems={totalItems}
        currentPage={page}
        onPageChange={this.handlePageChange}
        classes={{
          container: 'paginator-container',
          list: 'paginator-list',
          pageItem: 'paginator-item',
          pageLink: 'paginator-link',
          pageLinkActive: 'paginator-link--active',
          pageLinkDisabled: 'paginator-link--disabled'
        }}
      />
    );
  }
}

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