Pagination

JSX component for pagination, compatible with React, Preact or vhtml.

• Zero Deps
• Unopionionated: Each DOM element is left up to you.
• Compatible: Plays nicely with Reactstrap, React Router v4.
• BYOF: (Bring Your Own Framework) Pure JSX, not tied to React.

Installation

Yarn:

$ yarn install --save @traverse-data/pagination

npm:

$ npm install --save @traverse-data/pagination

Determine the build to import based on which framework(s) you use:

• @traverse-data/pagination/react/Pagination
• @traverse-data/pagination/react/PaginationReactstrap
• @traverse-data/pagination/react/PaginationReactRouter
• @traverse-data/pagination/preact/Pagination
• @traverse-data/pagination/vhtml/Pagination

Include with a module bundler like rollup or webpack:

// using ES6 modules
import Pagination from '@traverse-data/pagination/react/Pagination'

// using CommonJS modules
var Pagination = require('@traverse-data/pagination/react/Pagination')

Documentation

React/Preact/vhtml

At the lowest level, each DOM element is specified by functions passed as props to the component. The resulting output of each element is layed out below. Most functions receive a page parameter, which can be used to generate URLs. Be sure to include key props in the returned components, since each one will be a child of <wrapper></wrapper>.

If the current page (<item active />) should be rendered differently, a second parameter active is passed to the item() function.

import Pagination from '@traverse-data/pagination/react/Pagination'

<Pagination
    page={6}
    perPage={10}
    count={115}
    context={1}
    previous={page => <Component key={'previous'} />}
    next={page => <Component key={'next'} />}
    item={(page, active) => <Component key={page} />}
    spacer={key => <Component key={key} />}
    wrapper={props => <Component>{props.children}</Component>}
/>

                        context={1}
                       +-----------+ <spacer />
                       |           | |
+------------------------------------v------------------+
| Previous | 1 | 2 |...| 5 | 6 | 7 |...| 10 | 11 | Next |
+^---------------^-----------^---------------------^----+
 |               |           |                     |
 <previous />    <item />    <item active />       <next />

Props:

• page: Number. Current page.
• perPage: Number. How many items are paginated per page.
• count: Number. Total count of items (determines the last page).
• context: Number. How many pages to show on both sides of the current page.
• previous: Function. Component for the Previous button.
• next: Function => Component for the Next button.
• item: Function => Component for each Page button.
• spacer: Function => Component for each contracted space.
• wrapper: Function => Component to wrap all children in.

Reactstrap

If you're using Reactstrap, there's already a nice Pagination component. Pagination plays nicely with it. URLs still have to be generated though with the href() function, which receives a page number and returns a string.

Additional props are passed through, so className, size, tag, etc. are supported.

import Pagination from '@traverse-data/pagination/react/PaginationReactstrap'

<Pagination
    page={6}
    perPage={10}
    count={115}
    href={page => `/my-url?page=${page}`}
/>

Props:

• page: Number. Current page.
• perPage: Number. How many items are paginated per page.
• count: Number. Total count of items (determines the last page).
• context: Number. Default: 2. How many pages to show on both sides of the current page.
• href: Function => String to use for the href of each element.

React Router v4

If you're using Reactstrap AND React Router v4, Pagination also plays nicely by automatically creating <Link />'s, which update the page= URL query parameter. Existing query parameters are respected.

import Pagination from '@traverse-data/pagination/react/PaginationReactRouter'

<Pagination
    page={6}
    perPage={10}
    count={115}
/>

Props:

• page: Number. Current page.
• perPage: Number. How many items are paginated per page.
• count: Number. Total count of items (determines the last page).
• context: Number. Default: 2. How many pages to show on both sides of the current page.

License

MIT