Paginate each sub component automatically. Implemented in React hooks so we can ship the compoenent without extra dependency like redux.
- 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>
- 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>
</>
);
}