useChangePage.md

useChangePage

Usage

import { useChangePage } from "default-hooks";

const Demo = () => {
  // get from your server
  const TOTAL_PAGE = 10;
  const [currentPage, setCurrentPage] = useState<number>(0);

  const { handler, disabled, title } = useChangePage(
    currentPage,
    setCurrentPage,
    TOTAL_PAGE
  );
  return (
    <FlexCenter>
      <button
        onClick={() => {
          handler("prev");
        }}
        disabled={disabled.prev}
        title={title.prev}
      >
        {"<"}
      </button>

      <FlexBox gap={5}>
        {[...Array(10)].map((_, index) => (
          <Page
            key={index}
            selected={index === currentPage}
            onClick={() => [setCurrentPage(index)]}
          >
            {index + 1}
          </Page>
        ))}
      </FlexBox>
      <button
        onClick={() => {
          handler("next");
        }}
        disabled={disabled.next}
        title={title.prev}
      >
        {">"}
      </button>
    </FlexCenter>
  );
};