1.0.6 • Published 2 years ago
@zendeskgarden/container-pagination v1.0.6
@zendeskgarden/container-pagination 
This package includes containers relating to pagination in the Garden Design System.
Installation
npm install @zendeskgarden/container-pagination
Usage
Check out storybook for live examples.
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>;
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.2
2 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.3.17
3 years ago
0.3.18
3 years ago
0.3.16
3 years ago
0.3.15
4 years ago
0.3.14
4 years ago
0.3.13
4 years ago
0.3.12
4 years ago
0.3.10
4 years ago
0.3.9
4 years ago
0.3.8
4 years ago
0.3.7
5 years ago
0.3.6
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.15
6 years ago
0.1.14
6 years ago
0.1.13
6 years ago
0.1.12
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago