react-pagify-preset-bootstrap

Bootstrap preset for react-pagify

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-pagify-preset-bootstrap
801.0.28 years ago8 years agoMinified + gzip package size for react-pagify-preset-bootstrap in KB

Readme

Bootstrap preset for react-pagify
This preset allows you to integrate react-pagify with Bootstrap 3.

Play with it on the demo page.

Installation

npm install --save react-pagify react-pagify-preset-bootstrap

Usage

import Paginator from 'react-pagify';
import pagifyBootstrapPreset from 'react-pagify-preset-bootstrap';
import segmentize from 'segmentize';

...

<Paginator.Context
  {...pagifyBootstrapPreset}
  segments={segmentize({
      pages,
      page,
      beginPages: 1,
      endPages: 1,
      sidePages: 3
  })}
  onSelect={(newPage, event) => {
      event.preventDefault();
      onPageChange(newPage);
  }}
>
  <Paginator.Button page={page - 1}>Previous</Paginator.Button>
  <Paginator.Segment field="beginPages" />
  <Paginator.Ellipsis previousField="beginPages" nextField="previousPages" />
  <Paginator.Segment field="previousPages" />
  <Paginator.Segment field="centerPage" className="active" />
  <Paginator.Segment field="nextPages" />
  <Paginator.Ellipsis previousField="nextPages" nextField="endPages" />
  <Paginator.Segment field="endPages" />
  <Paginator.Button page={page + 1}>Next</Paginator.Button>
</Paginator.Context>

Note that you need to use active class for the centerPage segment.
Also note that you can use any library for pagination logic, segmentize is recommended but not required.
See react-pagify documentation for all available options.

Changelog

The changelog can be found on the Releases page.

Author


Demo page is based on the original react-pagify demo.
License
The MIT License, see the included License.md file.