# react-paginate-in-peace

> This is a simple react pagination component

Latest version **1.3.3** (published 2021-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-paginate-in-peace
pnpm add react-paginate-in-peace
yarn add react-paginate-in-peace
bun add react-paginate-in-peace
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2021-09-22 |
| First published | 2021-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Md. Asif Al-Mahmud |
| Maintainers | asif-almahmud |
| Keywords | react-paginate, react-pagination, react-paginator, react-simple-pagination |

## Links

- npm: https://www.npmjs.com/package/react-paginate-in-peace
- Repository: https://github.com/asif-almahmud/react-paginate-in-peace
- Homepage: https://github.com/asif-almahmud/react-paginate-in-peace#readme
- Issues: https://github.com/asif-almahmud/react-paginate-in-peace/issues
- npm.io page: https://npm.io/package/react-paginate-in-peace

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 1.3.3 (latest) — 2021-09-22
- 1.3.2 — 2021-09-22
- 1.3.1 — 2021-09-22
- 1.3.0 — 2021-09-22
- 1.2.9 — 2021-09-22
- 1.2.8 — 2021-09-22
- 1.2.7 — 2021-09-22
- 1.2.6 — 2021-09-22
- 1.2.5 — 2021-09-22
- 1.2.4 — 2021-09-22
- 1.2.3 — 2021-09-22
- 1.2.2 — 2021-09-22
- 1.2.1 — 2021-09-21
- 1.2.0 — 2021-09-20
- 1.1.9 — 2021-09-20
- … 20 more at https://npm.io/package/react-paginate-in-peace/versions

## README

# react-paginate-in-peace

A simple and easy to use react pagination component.

## Installation

    npm install react-paginate-in-peace

## Usage

```jsx
import React, { useState } from "react";
import Table from "./Table";
import Paginate from "react-paginate-in-peace";
import data from "./MOCK_DATA.json";

const Data = data;
const noOfRows = Data.length;

export default DataTable = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const rowsPerPage = 20;
  const totalPages = noOfRows / rowsPerPage;

  const dataContentPerPage = Data.filter(
    (data) =>
      data.id <= currentPage * rowsPerPage &&
      data.id > (currentPage - 1) * rowsPerPage
  );

  return (
    <div>
      // I have created the table component below to reduce markup
      <Table
        tableData={dataContentPerPage}
        thNames={["Name", "Email", "Gender", "Phone"]}
        tdProperties={["first_name", "email", "gender", "phone"]}
        thStyle={{
          textAlign: "center",
          border: "1px solid #ddd",
          backgroundColor: "#E5EAF0",
          paddingTop: "2px",
          paddingBottom: "2px",
        }}
        tdStyle={{
          textAlign: "center",
          border: "1px solid #ddd",
          backgroundColor: "#edf0f4",
          paddingTop: "2px",
          paddingBottom: "2px",
        }}
      />
      {/* Now we are going to use our imported paginating component. */}
      <Paginate
        totalPageCount={totalPages} // Required Property
        setPage={setCurrentPage} // Required Property
        activeDigitColor={"white"} // Optional Property
        activeBackgroundColor={"#21385b"} // Optional Property
        buttonBorderColor={""} // Optional Property
        arrowColor={"#21385b"} // Optional Property
        dotColor={"#000"} // Optional Property
      />
    </div>
  );
};
```

## Props

Required props: totalPageCount, setPage .

Optional props: activeDigitColor, activeBackgroundColor, buttonBorderColor, arrowColor, dotColor .

| Name                  | Type     | Details                                                                                                                                        |
| --------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| totalPageCount        | number   | Provide the variable that gives total number of pages (This prop is required )                                                                 |
| setPage               | function | Provide your state setting function for setting the current or active page. (Required prop)                                                    |
| activeDigitColor      | string   | Takes a color name as string. It defines the active digit color and the background color of the inactive buttons. (Optional prop)              |
| activeBackgroundColor | string   | Takes a color name as string. It defines the background color of the active digit and the digit color of the inactive buttons. (Optional prop) |
| buttonBorderColor     | string   | Takes a color name as string. It defines the border color of the digit buttons. (Optional prop)                                                |
| arrowColor            | string   | Takes a color name as string. It defines the navigating arrows color.(Optional prop)                                                           |
| dotColor              | string   | Takes a color name as string. It defines the color of the dots.(Optional prop)                                                                 |

---
_Source: https://npm.io/package/react-paginate-in-peace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._