Containers relating to pagination in the Garden Design System
npm install @zendeskgarden/container-pagination[npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/container-pagination
[npm version link]: https://www.npmjs.com/package/@zendeskgarden/container-pagination
This package includes containers relating to pagination in the
Garden Design System.
``sh`
npm install @zendeskgarden/container-pagination
Check out storybook for live
examples.
The usePagination hook is wrapper on top of the useSelection hook with
specific prop getters for pagination.
`jsx
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
return (
);
};
`
`jsx
import { createRef, useRef } from 'react';
import { PaginationContainer } from '@zendeskgarden/container-pagination';
{({
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
return (
);
}}
;
``