# react-pagination-status > A pagination component for React Latest version **2.0.0** (published 2018-04-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-pagination-status pnpm add react-pagination-status yarn add react-pagination-status bun add react-pagination-status ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2018-04-06 | | First published | 2016-08-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=6.2.2 | | Dependencies | 12 | | Unpacked size | 16.1 KB | | Known vulnerabilities | 0 (+7 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | addhome2001 | | Maintainers | addhome2001 | | Keywords | react, component, pagination, status | ## Links - npm: https://www.npmjs.com/package/react-pagination-status - Repository: https://github.com/addhome2001/react-pagination-status - Homepage: https://github.com/addhome2001/react-pagination-status#readme - Issues: https://github.com/addhome2001/react-pagination-status/issues - npm.io page: https://npm.io/package/react-pagination-status ## Dependencies (12) - [chai](https://npm.io/package/chai.md) ^3.5.0 - [snyk](https://npm.io/package/snyk.md) ^1.41.1 - [react](https://npm.io/package/react.md) ^16.2.0 - [sinon](https://npm.io/package/sinon.md) ^1.17.5 - [enzyme](https://npm.io/package/enzyme.md) ^3.3.0 - [webpack](https://npm.io/package/webpack.md) ^2.2.1 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [jsdom-global](https://npm.io/package/jsdom-global.md) ^2.0.0 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.3.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.28.0 - [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.0 (latest) — 2018-04-06 - 1.2.1 — 2018-01-13 - 1.2.0 — 2018-01-13 - 1.1.3 — 2017-04-17 - 1.1.2 — 2017-02-09 - 1.1.1 — 2016-08-26 - 1.1.0 — 2016-08-25 - 1.0.9 — 2016-08-24 - 1.0.8 — 2016-08-23 - 1.0.7 — 2016-08-22 - 1.0.6 — 2016-08-22 - 1.0.5 — 2016-08-22 - 1.0.4 — 2016-08-22 - 1.0.3 — 2016-08-22 - 1.0.2 — 2016-08-22 - … 2 more at https://npm.io/package/react-pagination-status/versions ## README # react-pagination-status [![Build Status](https://travis-ci.org/addhome2001/react-pagination-status.svg?branch=master)](https://travis-ci.org/addhome2001/react-pagination-status) [![Known Vulnerabilities](https://snyk.io/test/github/addhome2001/react-pagination-status/badge.svg)](https://snyk.io/test/github/addhome2001/react-pagination-status) > A pagination component of React let you to manage page status. If you want use `react-pagination-status` with table component, maybe you can try [this](https://www.npmjs.com/package/react-pagination-table) ## Install ```js npm install --save react-pagination-status ``` ## Migration After the version `2.x`, the behavior of the `className` prop will be a little different. For a better way to architect your CSS, the className of the specific components will be more maintainable. Such as the className of the buttons will become `{prefixClassName}__btn`, and the activated button will be `{prefixClassName}__btn--active`. > If you want to see more `CSS`. The [example](https://github.com/addhome2001/react-pagination-status/blob/master/example) will be helpful to you. ## Usage ### [Demo]( https://addhome2001.github.io/react-pagination-status/) ````javascript import React from 'react'; import Pagination from 'react-pagination-status'; export default class app extends React.Component { constructor(props) { super(props); this.handleChangePage = ::this.handleChangePage; //Store activePage state into parent component this.state = { activePage: 0 } } handleChangePage(page) { this.setState({ activePage: page }) } render() { const { activePage } = this.state; return (
now page number: { activePage +1 }
) } } ```` ## className The `react-pagination-status` is the default **className** and **prefix**. You can pass custom name with the `className` prop. > In addition, setting the specific components to the differences styles and status by these **className** >- {**className**}__item(the `
  • ` tags) >- {**className**}__btn(the page button) >- {**className**}__btn--active(the activated page button) >- {**className**}__btn--disable ## API ### Pagination | Props | Description | Type | Default | |------------------|------------------------------------|---------------|--------------------------| | handleChangePage | the argument is current page | function | isRequired | | activePage | the activated page | Number | isRequired | | totalCount | the length of the items | Number | isRequired | | perPageItemCount | the numbers of the items on per page | Number | isRequired | | nextPageText | the text of `nextPage` button | String | 下一頁 | | prePageText | the text of `previousPage` button | String | 上一頁 | | className | the default className | String | react-pagination-status | | partialPageCount | the numbers of the page buttons | Number | 5 | ## Example ``` npm start ``` By default, the example is on the `8000` port after run the command above. Then you can access `localhost:8000` to see the demo. ## Test ``` npm test ``` LICENSE ======= MIT --- _Source: https://npm.io/package/react-pagination-status · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._