Skip to content
This repository has been archived by the owner on Nov 9, 2021. It is now read-only.

Latest commit

 

History

History
68 lines (49 loc) · 2.12 KB

Readme.md

File metadata and controls

68 lines (49 loc) · 2.12 KB

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.