1.0.6 • Published 11 months 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
11 months ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.2
1 year ago
1.0.1
2 years ago
1.0.0
2 years ago
0.3.17
2 years ago
0.3.18
2 years ago
0.3.16
2 years ago
0.3.15
2 years ago
0.3.14
3 years ago
0.3.13
3 years ago
0.3.12
3 years ago
0.3.10
3 years ago
0.3.9
3 years ago
0.3.8
3 years ago
0.3.7
4 years ago
0.3.6
4 years ago
0.3.5
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.6
4 years ago
0.2.5
4 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.15
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.1.12
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago