Awesome

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

• Artem Sapegin

Demo page is based on the original react-pagify demo.

License

The MIT License, see the included License.md file.