react-pagination-helper v1.0.34

<!-- app file -->

import { useState } from 'react';
import {SimplePaginationHelper} from 'react-pagination-helper'

function App() {

  const [active, setActive] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const perPageList = [10, 25, 50, 100, 200, 300]
  const totalNumber = 178;
  const paginationStyle = {
    container: {},
    perPageContainer: {},
    perPageSelect: {},
    paginationContainer: {},
    doubleArrowIconDiv: {},
    doubleArrow: {},
    singleArrowIconDiv: {},
    singleArrow: {},
    itemContainer: {},
    threeDots: {},
    item: {},
    itemActive: {
      backgroundColor: 'red',
    },
  }

  return (
    <div className="App">
      <SimplePaginationHelper activePage={active} totalNumber={totalNumber}
       perPage={perPage} setPerPage={setPerPage} setActive={setActive}
       perPageList={perPageList} paginationStyle={paginationStyle} />
    </div>
  );
}

export default App;

----------For Better Version----------

<!-- app file -->

import { useState } from 'react';
import {SimplePaginationHelper} from 'react-pagination-helper'

function App() {

  const perPageList = [10, 25, 50, 100, 200, 300]
  const [paginationValue, setPaginationValue] = useState({
    page: 1,
    per_page: perPageList[0],
    total: 0,
  });
   async function setPerPage(perPage) {
    setPaginationValue({
      ...paginationValue,
      per_page: perPage,
    });
    await fetchData(paginationValue.page, perPage);
  }
  async function setActive(activePage) {
    setPaginationValue({
      ...paginationValue,
      page: activePage,
    });
    await fetchData(activePage, paginationValue.per_page);
  }

  useEffect(() => {
    fetchData(paginationValue.page, paginationValue.per_page);
  }, []);

  const fetchData = (page, per_page) => {
   // this code depends on api response
    axios
      .get(`${serverUrl}/user/list?page=${page}&per_page=${per_page}`)
      .then((res) => {
        setCompanyData(res?.data?.data?.user?.data);
        setPaginationValue({
          page: res?.data?.data?.user?.current_page,
          per_page: res?.data?.data?.user?.per_page,
          total: res?.data?.data?.user?.total,
        });
      })
      .catch((error) => {
        toast.error("Something went wrong");
        console.log(error);
      });
  };

   // for change style must me follow and debug user html code in console for inspect
  const paginationStyle = {
    container: {},
    perPageContainer: {},
    perPageSelect: {},
    paginationContainer: {},
    doubleArrowIconDiv: {},
    doubleArrow: {},
    singleArrowIconDiv: {},
    singleArrow: {},
    itemContainer: {},
    threeDots: {},
    item: {},
    itemActive: {
      backgroundColor: 'red',
    },
  }

  return (
    <div className="App">
      <SimplePaginationHelper
      activePage={paginationValue.page}
      totalNumber={paginationValue?.total}
      perPage={paginationValue.per_page}
      setPerPage={setPerPage}
      setActive={setActive}
      perPageList={perPageList}
      paginationStyle={paginationStyle} />
    </div>
  );
}

export default App;