This preset allows you to integrate react-pagify with Bootstrap 3.
Play with it on the demo page.
npm install --save react-pagify react-pagify-preset-bootstrapimport 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.
The changelog can be found on the Releases page.
Demo page is based on the original react-pagify demo.
The MIT License, see the included License.md file.