kfwong/react-paginated-form

Paginate each sub component automatically. Implemented in React hooks so we can ship the compoenent without extra dependency like redux.

PaginatedForm

Paginate each sub component automatically. Implemented in React hooks so we can ship the compoenent without extra dependency like redux.

Usage:

1. Putting any components into children of PaginatedForm will automatically paginate them.

// you can use onChangePage to customize pagination behaviour such as conditionally skip page
const logPage = (oldPage, newPage) => {
    if(newPage === 1) return 2;
    return newPage;
}

<PaginatedForm
      titles={["Page0", "Page1", "Page2", "Page3"]}
      onChangePage={logPage}
    >
      <Page0/>
      <Page1/>
      <Page2/>
      ...
</PaginatedForm>

2. To customize paginated control, optionally import usePaginatedFormControl and destructure it for the methods.

import {usePaginatedFormControl} from "./PaginatedForm";

export const Page1: React.FC = (props) => {
  const { nextPage, previousPage, gotoPage } = usePaginatedFormControl();

  return (
    <>
      <h1>Page 1</h1>
      <p>This is page 1 description.</p>
      <button onClick={previousPage}>Previous</button>
      <button onClick={nextPage}>Next</button>
    </>
  );
}