@etchteam/next-pagination v3.5.5
next-pagination
The best damn pagination component. For Next.js
TL;DR Just show me the DEMO
Why use this pagination module?
- Accessible. Semantic HTML and fully marked up with appropriate aria roles for assisted browsing.
- Usable. The base CSS styles account for keyboard focus states and fat finger touch targets.
- Responsive. Works on all devices.
- Themeable. Make it look however you want.
- Self contained. There's only one required prop to get going. The rest of the logic is handled for you.
- Works with Next. Integrated with the Next.js router.
Install
npm install --save @etchteam/next-pagination
Usage
This component is fairly self contained. You will need to pass the total number of potential results in order to calculate the number of pages to show.
import React, { Component } from 'react'
import Pagination from '@etchteam/next-pagination'
class Example extends Component {
render() {
return <Pagination total={1000} />
}
}
You will need to import the CSS, either in your _app.js
, or in your Sass build.
import '@etchteam/next-pagination/dist/index.css'
When used, the pagination component will reload the same route with added pagination query params.
page
for the page number the user is on.size
for the number of results per page.
e.g. ?page=4&size=20
The default page is 1. The default size is 20.
You'll need to load the actual data from your API yourself. We're only here for the front-end!
Props
Name | Type | Description |
---|---|---|
total | Number | Required. The total number of pages. |
theme | Object | A CSS modules style object. |
sizes | Array | An array of page size numbers |
perPageText | String | Label for the page size dropdown |
setPageSizeText | String | Label for the invisible page size button |
linkProps | Object | Extra props to pass to the next.js links |
Theming
Next.js natively supports CSS modules, so this component supports injecting CSS module styles.
Import the styles as you would for a normal component, but pass them as props.
[...]
import styles from '/my/path/to/styles.module.css'
class Example extends Component {
render() {
return <Pagination total={1000} theme={styles} />
}
}
The theme uses BEM class naming with the base class next-pagination
. The file /src/index.module.scss
should give you a solid idea of what's needed.
Contribute
This package was created with create-react-library.
Setup
To get set up you'll need to run npm install && cd example && npm install
Development
In the root folder, run npm run start
At the same time, in the example folder, run npm run dev
Then head over to localhost:3000
to see the example running.
Deploy the example
In the root folder run npm run deploy
to deploy the example to github pages on the gh-pages
branch of your repo.
Publish to npm
Feeling confident? Run npm publish
to send the latest version to npm.
License
MIT © etchteam