{"id":13469591,"url":"https://github.com/etchteam/next-pagination","last_synced_at":"2025-05-16T02:06:50.030Z","repository":{"id":38311888,"uuid":"263925377","full_name":"etchteam/next-pagination","owner":"etchteam","description":"The best damn pagination component. For Next.js","archived":false,"fork":false,"pushed_at":"2025-04-16T15:39:20.000Z","size":14773,"stargazers_count":167,"open_issues_count":6,"forks_count":15,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-16T23:02:14.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://etchteam.github.io/next-pagination/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etchteam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-14T13:38:39.000Z","updated_at":"2025-04-16T15:39:22.000Z","dependencies_parsed_at":"2023-10-03T16:37:54.978Z","dependency_job_id":"22384717-715b-4b1c-a297-028fd4ec0dbd","html_url":"https://github.com/etchteam/next-pagination","commit_stats":{"total_commits":120,"total_committers":8,"mean_commits":15.0,"dds":0.5833333333333333,"last_synced_commit":"aac1a3462e39677d1b71a245656829b4b24fd022"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fnext-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fnext-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fnext-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fnext-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etchteam","download_url":"https://codeload.github.com/etchteam/next-pagination/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453651,"owners_count":22073617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T15:01:46.128Z","updated_at":"2025-05-16T02:06:49.993Z","avatar_url":"https://github.com/etchteam.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# next-pagination\n\n\u003e The best damn pagination component. For Next.js\n\n[![NPM](https://img.shields.io/npm/v/@etchteam/next-pagination.svg)](https://www.npmjs.com/package/@etchteam/next-pagination) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nTL;DR Just show me the [DEMO](https://etchteam.github.io/next-pagination)\n\n\u003cimg src=\"https://raw.githubusercontent.com/etchteam/next-pagination/master/example/public/example.png\" alt=\"An example of the pagination UI in use\" /\u003e\n\n## Why use this pagination module?\n\n- **Accessible.** Semantic HTML and fully marked up with appropriate aria roles for assisted browsing.\n- **Usable.** The base CSS styles account for keyboard focus states and fat finger touch targets.\n- **Responsive.** Works on all devices.\n- **Themeable.** Make it look however you want.\n- **Self contained.** There's only one required prop to get going. The rest of the logic is handled for you.\n- **Works with Next.** Integrated with the Next.js router.\n\n## Install\n\n```bash\nnpm install --save @etchteam/next-pagination\n```\n\n## Usage\nThis 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.\n\n```jsx\nimport React, { Component } from 'react'\n\nimport Pagination from '@etchteam/next-pagination'\n\nclass Example extends Component {\n  render() {\n    return \u003cPagination total={1000} /\u003e\n  }\n}\n```\n\nYou will need to import the CSS, either in your `_app.js`, or in your Sass build.\n\n```jsx\nimport '@etchteam/next-pagination/dist/index.css'\n```\n\nWhen used, the pagination component will reload the same route with added pagination query params.\n\n- `page` for the page number the user is on.\n- `size` for the number of results per page.\n\ne.g. ?page=4\u0026size=20\n\nThe **default page** is 1. The **default size** is 20.\n\nYou'll need to load the actual data from your API yourself. We're only here for the front-end!\n\n## Props\n\n| Name                     | Type       | Description                               |\n| ------------------------ | ---------- | ----------------------------------------- |\n| `total`                  | `Number`   | **Required.** The total number of pages.  |\n| `theme`                  | `Object`   | A CSS modules style object.               |\n| `sizes`                  | `Array`    | An array of page size numbers             |\n| `perPageText`            | `String`   | Label for the page size dropdown          |\n| `setPageSizeText`        | `String`   | Label for the invisible page size button  |\n| `linkProps`              | `Object`   | Extra props to pass to the next.js links  |\n\n## Theming\nNext.js natively supports **CSS modules**, so this component supports injecting CSS module styles.\n\nImport the styles as you would for a normal component, but pass them as props.\n\n```jsx\n[...]\nimport styles from '/my/path/to/styles.module.css'\n\nclass Example extends Component {\n  render() {\n    return \u003cPagination total={1000} theme={styles} /\u003e\n  }\n}\n```\n\nThe 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.\n\n## Contribute\n\nThis package was created with [create-react-library](https://github.com/transitive-bullshit/create-react-library#readme).\n\n### Setup\n\nTo get set up you'll need to run `npm install \u0026\u0026 cd example \u0026\u0026 npm install`\n\n## Development\n\nIn the root folder, run `npm run start`\n**At the same time**, in the example folder, run `npm run dev`\nThen head over to `localhost:3000` to see the example running.\n\n## Deploy the example\n\nIn the root folder run `npm run deploy` to deploy the example to github pages on the `gh-pages` branch of your repo.\n\n## Publish to npm\n\nFeeling confident? Run `npm publish` to send the latest version to npm.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fnext-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetchteam%2Fnext-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fnext-pagination/lists"}