react-custom-pagination

simple and responsive pagination for react.

Install

npm install --save react-custom-pagination

what is this ?

Get Responsive and yet simple pagination for React .

installation

npm install react-custom-pagination --save

import

import Pagination from "react-custom-pagination";

usage

 //list of items you want to render

 const posts=[
    { id: "1", name: "user1" },
    { id: "2", name: "user2" },
    { id: "3", name: "user3" },
    { id: "4", name: "user4" },
    { id: "5", name: "user5" },
    { id: "6", name: "user6" },
    ]


  const [currentPage, setCurrentPage] = useState(1);        //page
  const [postsPerPage] = useState(5);                      // no of posts you want to render in one page

  //get current Posts

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // when user clicks on number this function will execute

  const paginate = (number) => {
    setCurrentPage(number);
  };


//map current posts to render 5 posts per page

<Pagination
  totalPosts={posts.length}
  postsPerPage={postsPerPage}
  paginate={paginate}
/>

example

import React, { useState } from "react";
import "./App.css";
import Pagination from "react-custom-pagination";

const App = () => {
  const posts = [
    { id: "1", name: "user 1" },
    { id: "2", name: "user 2" },
    { id: "3", name: "user 3" },
    { id: "4", name: "user 4" },
    { id: "5", name: "user 5" },
    { id: "6", name: "user 6" },
    { id: "7", name: "user 7" },
    { id: "8", name: "user 8" },
    { id: "9", name: "user 9" },
    { id: "10", name: "user 10" },
    { id: "11", name: "user 11" },
    { id: "12", name: "user 12" },
    { id: "13", name: "user 13" },
    { id: "14", name: "user 14" },
    { id: "15", name: "user 15" },
    { id: "16", name: "user 16" },
    { id: "17", name: "user 17" },
    { id: "18", name: "user 18" },
    { id: "19", name: "user 19" },
    { id: "20", name: "user 20" },
  ];

  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(3);

  //get current Posts

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // when user clicks on number this function will execute

  const paginate = (number) => {
    setCurrentPage(number);
  };

  return (
    <>
      <div
        style={{
          width: "500px",
          textAlign: "center",
          marginTop: "50px",
          height: "200px",
        }}
      >
        <h1 style={{ textAlign: "center", color: "green" }}>
          Pagination Example
        </h1>
        {currentPosts.map((item) => {
          return (
            <p key={item.id} style={{ color: "red" }}>
              {item.name}
            </p>
          );
        })}
      </div>
      <div style={{ width: "500px" }}>
        <Pagination
          totalPosts={posts.length}
          postsPerPage={postsPerPage}
          paginate={paginate}
          view={5}
          showLast={true}
          showFirst={true}
          showIndex={true}
        />
      </div>
    </>
  );
};
export default App;

Required

1. totalPosts (required) //total no of posts

 <Pagination
    totalPosts={posts.length}
  />

2. postsPerPage (required) // no of posts per page

 <Pagination
   postsPerPage={postsPerPage}
  />

3. paginate (required)

// when user clicks on number this function will execute and change currentPage

//paginate function

 const paginate = (number) => {
    setCurrentPage(number);
  };

//pagination component

<Pagination
    paginate={paginate}
 />

props

Name	Required	Type	Default	Description
totalPosts	Yes	Number	---	total no of posts
postsPerPage	Yes	Number	---	no of posts per page
paginate	Yes	function	---	this function will execute when click on paginate number
view	No	Number	5	no of paginates
showIndex	No	Boolean	false	shows the index bar
showFirst	No	Boolean	false	shows the go to first page button
showLast	No	Boolean	false	shows the go to Last page button
showFirstText	No	String	"First Page"	text inside show first page button
showLastText	No	String	"Last Page"	text inside show last page button
color	No	String	"white"	color of the text
bgColor	No	String	"skyblue"	background color
indexbgColor	No	String	"tomato"	background color of index bar
selectColor	No	String	"grey"	background color when selected
boxHeight	No	String,Number	"40px"	height
boxWidth	No	String,Number	"40px"	width
boxRadius	No	String	"50%"	border-radius
indexBorderRadius	No	String	"5%"	border-radius of index tab
justify	No	String	"center"	justify-content

optional props

//view
<Pagination
    view={5}           //no of paginates
 />

License

ISC © akhilv77