Package Exports

@zendeskgarden/container-pagination

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zendeskgarden/container-pagination) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zendeskgarden/container-pagination

This package includes containers relating to pagination in the Garden Design System.

Installation

npm install @zendeskgarden/container-pagination

Usage

For live examples check out our storybook.

usePagination

The usePagination hook is wrapper on top of the useSelection hook with specific prop getters for pagination.

import { createRef, useRef } from 'react';
import { usePagination } from '@zendeskgarden/container-pagination';

const Pagination = () => {
  const previousPageRef = useRef(null);
  const nextPageRef = useRef(null);
  const pageRefs = pages.map(() => createRef(null));

  const {
    selectedItem,
    focusedItem,
    getContainerProps,
    getNextPageProps,
    getPreviousPageProps,
    getPageProps
  } = usePagination();

  // role="null" is applied due to implied role="navigation" semantics of <nav />
  return (
    <nav {...getContainerProps({ role: null })}>
      <ul style={{ display: 'flex' }}>
        <li
          {...getPreviousPageProps({
            current: selectedItem === 'prev',
            focused: focusedItem === 'prev',
            item: 'prev',
            focusRef: previousPageRef,
            ref: previousPageRef,
            key: 'previous-page'
          })}
        >
          Prev
        </li>
        {pages.map((page, index) => {
          return (
            <li
              {...getPageProps({
                focused: index === focusedItem,
                current: index === selectedItem,
                page: index,
                item: index,
                focusRef: pageRefs[index],
                ref: pageRefs[index],
                key: `page-${index}`,
                style: {
                  outline: index === focusedItem && '3px solid red',
                  background: index === selectedItem && 'gray',
                  padding: '0 6px'
                }
              })}
            >
              {index + 1}
            </li>
          );
        })}
        <li
          {...getNextPageProps({
            current: selectedItem === 'next',
            focused: focusedItem === 'next',
            item: 'next',
            focusRef: nextPageRef,
            ref: nextPageRef,
            key: 'next-page'
          })}
        >
          Next
        </li>
      </ul>
    </nav>
  );
};

PaginationContainer

import { createRef, useRef } from 'react';
import { PaginationContainer } from '@zendeskgarden/container-pagination';

<PaginationContainer>
  {({
    selectedItem,
    focusedItem,
    getContainerProps,
    getNextPageProps,
    getPreviousPageProps,
    getPageProps
  }) => {
    const previousPageRef = useRef(null);
    const nextPageRef = useRef(null);
    const pageRefs = pages.map(() => createRef(null));

    // role="null" is applied due to implied role="navigation" semantics of <nav />
    return (
      <nav {...getContainerProps({ role: null })}>
        <ul style={{ display: 'flex' }}>
          <li
            {...getPreviousPageProps({
              current: selectedItem === 'prev',
              focused: focusedItem === 'prev',
              item: 'prev',
              focusRef: previousPageRef,
              ref: previousPageRef,
              key: 'previous-page'
            })}
          >
            Prev
          </li>
          {pages.map((page, index) => {
            return (
              <li
                {...getPageProps({
                  focused: index === focusedItem,
                  current: index === selectedItem,
                  page: index,
                  item: index,
                  focusRef: pageRefs[index],
                  ref: pageRefs[index],
                  key: `page-${index}`,
                  style: {
                    outline: index === focusedItem && '3px solid red',
                    background: index === selectedItem && 'gray',
                    padding: '0 6px'
                  }
                })}
              >
                {index + 1}
              </li>
            );
          })}
          <li
            {...getNextPageProps({
              current: selectedItem === 'next',
              focused: focusedItem === 'next',
              item: 'next',
              focusRef: nextPageRef,
              ref: nextPageRef,
              key: 'next-page'
            })}
          >
            Next
          </li>
        </ul>
      </nav>
    );
  }}
</PaginationContainer>;