Custom Pagination Component

In this project directory, we are having a sample for custom pagination component.

1. Simple and light weight.
2. Customaizable and Reusable.
3. Responsive.
4. No-need of dependency packages (except react and react-dom)

1import Pagination from "custom-react-pagination";
2
3const App = () => {
4  const [currentPage, setCurrentPage] = useState(1); // initial page number to start.
5  const [userPerPage, setUserPerPage] = useState(10); // initial number of users per page to start.
6  return (
7    <Pagination
8      // current/initial page number, which can be changed
9      page={currentPage}
10      // dispatcher to set the current page number
11      onPageChange={setCurrentPage}
12      // initial no.of users to be rendered per page
13      itemsPerPage={userPerPage}
14      // dispatcher to set the no.of users per page
15      setItemsPerPage={setUserPerPage}
16      // below are optional properties
17
18      totalItems={500} // for total number of items (default to 50 items)
19      pageNumberLimit={10} // for number of pageNumbers in the page controller (default to 5 page numbers)
20      boderColor="#000000" // for custom border color of pagination (default color "#fff" which is white color)
21      labelColor="#000000" // for custom label on button color (default color "#fff" which is white color)
22      prevBtnLabel="Prev" // for custom label on button (default label "Prev")
23      nextBtnLabel="Next" // for custom label on button (default label "Next")
24      morePrevBtnLabel="&lt;&lt;"
25      moreNextBtnLabel="&gt;&gt;" // for custom label on more button (default label "&hellip;" which is "..." )
26      itemsInputLabel="Items Per Page" // for custom label on itemsNumber input field (default label "Items Per Page")
27    />
28  );
29};
30
31export default App;

In the above sample, the currentpage and userPerPage has to be managed in parent component. Like below,

1const [currentPage, setCurrentPage] = useState(1); // initial page number to start.
2const [userPerPage, setUserPerPage] = useState(10); // initial number of users per page to start.

Here is the sample customaized pagination component.

Available Scripts

In the project directory, you can simply clone it and run by:

npm install

Install's the package dependencies and devDependencies.

You can npm install any other packages and update them.

npm run build

Remove the old build folder and running the script will build new build folder as per the update made.