react-custom-pagination v1.6.8

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

optional props

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

License

ISC © akhilv77