react-responsive-pagination-component v0.0.2

react-responsive-pagination-component

Usage

import React, { useState } from "react";
import { Pagination, usePagination } from "react-responsive-pagination-hook";

function App() {
  const DATA = Array(20)
    .fill({})
    .map((_, index) => ({
      id: index,
      name: `SECHO-${index}`,
    }));
  const [data, setData] = useState([...DATA]);
  const { handlePageClick, totalPageCount, currPageNum, displayData } =
    usePagination({
      data: data,
      delay: 0,
      resize: true,
      responsiveOption: {
        breakPoint: 768,
        delay: 200,
        breakPointUnderViewCount: 6,
        breakPointOverViewCount: 10,
      },
    });
  const handleDelete = (e: any) => {
    const { id } = e.target.dataset;
    setData([...data.filter((item) => item.id != id)]);
  };
  return (
    <div className="App">
      <div>
        {displayData.map((item: any, _: number) => (
          <div key={item.id}>
            <span>{item.name}</span>
            <button onClick={handleDelete} data-id={item.id}>
              X
            </button>
          </div>
        ))}
      </div>
      <Pagination {...{ totalPageCount, currPageNum, handlePageClick, data }} />
    </div>
  );
}

Hook Props

responsiveOption Props

Pagination Component Props

Custom Style Props