https://github.com/etchteam/next-pagination
The best damn pagination component. For Next.js
https://github.com/etchteam/next-pagination
Last synced: about 1 year ago
JSON representation
The best damn pagination component. For Next.js
- Host: GitHub
- URL: https://github.com/etchteam/next-pagination
- Owner: etchteam
- License: mit
- Created: 2020-05-14T13:38:39.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-04-16T15:39:20.000Z (about 1 year ago)
- Last Synced: 2025-04-16T23:02:14.212Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://etchteam.github.io/next-pagination/
- Size: 14.1 MB
- Stars: 167
- Watchers: 3
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# next-pagination
> The best damn pagination component. For Next.js
[](https://www.npmjs.com/package/@etchteam/next-pagination) [](https://standardjs.com)
TL;DR Just show me the [DEMO](https://etchteam.github.io/next-pagination)
## 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
```bash
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.
```jsx
import React, { Component } from 'react'
import Pagination from '@etchteam/next-pagination'
class Example extends Component {
render() {
return
}
}
```
You will need to import the CSS, either in your `_app.js`, or in your Sass build.
```jsx
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.
```jsx
[...]
import styles from '/my/path/to/styles.module.css'
class Example extends Component {
render() {
return
}
}
```
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](https://github.com/transitive-bullshit/create-react-library#readme).
### 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.