Using npm

$ npm install reactjs-complete-pagination

Using yarn

$ yarn add reactjs-complete-pagination

View Demo

Demo

Code Sample

import Pagination from "reactjs-complete-pagination";

 const arrayToBePaginated = [
    { id: 1, title: "abc" },
    { id: 2, title: "cde" },
    { id: 3, title: "abca" },
    { id: 4, title: "cdeb" },
    { id: 5, title: "abcc" },
    { id: 6, title: "cde" },
    { id: 7, title: "abfc" },
    { id: 8, title: "cdeg" },
    { id: 9, title: "abdc" },
    { id: 10, title: "cdaae" },
    { id: 11, title: "abaac" },
    { id: 12, title: "cdre" },
    { id: 13, title: "abrrc" },
    { id: 14, title: "cdrrre" },
    { id: 15, title: "abtc" },
    { id: 16, title: "cdye" },
    { id: 17, title: "abuc" },
    { id: 18, title: "cdie" },
    { id: 19, title: "abaaac" },
    { id: 20, title: "cdegfe" },
    { id: 21, title: "abdfgc" },
    { id: 22, title: "cdsde" },
  ];

  <Pagination
      elements={arrayToBePaginated}
      noOfelementsInAPage={10}
      elementToRender={arrayToBePaginated.map((item) => (
        <div style={{ border: "1px solid black" }}>{item.title}</div>
      ))}
      size="md" //Size Can Be sm,md,lg
      maximumElementsOnLeftSide={5} //Maximum Elements On Left Side of Currently Active Page
      maximumElementsOnRightSide={5} //Maximum Elements On Right Side of Currently Active Page
    />