@akhilv77/react-pagination

simple and responsive pagination for react.

Install

npm install --save @akhilv77/react-pagination

what is this ?

Get Responsive and yet simple pagination for React .

installation

npm install @akhilv77/react-pagination --save

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 "@akhilv77/react-pagination";

const App = () => {
  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" },
    { id: "7", name: "user7" },
    { id: "8", name: "user8" },
    { id: "9", name: "user9" },
    { id: "10", name: "user10" },
    { id: "11", name: "user11" },
    { id: "12", name: "user12" },
    { id: "13", name: "user13" },
    { id: "14", name: "user14" },
    { id: "15", name: "user15" },
    { id: "16", name: "user16" },
    { id: "17", name: "user17" },
    { id: "18", name: "user18" },
    { id: "19", name: "user19" },
    { id: "20", name: "user20" },
  ];

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

  //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 (
    <>
      <h1>Pagination Example</h1>
      <div style={{ width: "300px", textAlign: "center" }}>
        {currentPosts.map((item) => {
          return <p key={item.id}>{item.name}</p>;
        })}
        <Pagination
          totalPosts={posts.length}
          postsPerPage={postsPerPage}
          paginate={paginate}
        />
      </div>
    </>
  );
};
export default App;

props

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

 <Pagination
    totalPosts={posts.length}
  />

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

 <Pagination
   postsPerPage={postsPerPage}
  />

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}
 />

color (optional) // text color

bgColor (optional) // background color

boxHeight (optional) // height

boxWidth (optional) // width

justify (optional) // justify

License

MIT © akhilv77