@contentful/f36-pagination

Forma 36: Pagination component

Usage no npm install needed!

<script type="module">
  import contentfulF36Pagination from 'https://cdn.skypack.dev/@contentful/f36-pagination';
</script>

README

title: 'Pagination' status: 'alpha' isNew: true slug: /components/pagination/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/pagination' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-pagination' typescript: ./src/Pagination.tsx

Used to navigate between pages on a list.

Import

import { Pagination } from '@contentful/f36-pagination';

Examples

Basic

When not using the total prop, it's necessary to pass to the component the isLastPage and the pageLength prop, so the Pagination component can render correctly.

With total number of items

When you know how many items in total there will be paginated on, you should pass that prop and the Pagination component will make all the calculations.

With view per page selector

With total and view per page selector

Props (API reference)

Content guidelines

  • onPageChange prop must update the list displayed to the user based on the page navigated to.

Accessibility

  • All the necessary a11y attributes are provided for the pagination elements.
  • Pass an aria-label to the Pagination to give more context to screen readers.