Pagination breaks content into pages for easier wayfinding and lower information density within a list.
Overview
Resources
Install
yarn add @activecampaign/camp-components-paginationImplementation details
Compose the pagination
Camp’s pagination components are built as a set that is intended to be composed together.
The <PageContainer/> expects children in the form of <Page/> components. The page container is responsible for managing the internal state of the pagination controls. The developer using the component is in charge of keeping track of what page is currently active and providing that to the <PageContainer />. Check out the story below to see an example of how all the pieces come together for a cohesive experience.
import React, { useState, useMemo } from 'react';
import * as Pagination from '@activecampaign/camp-components-pagination';
export const PaginationExample = ({ count, textOnly, ...props }) => {
// Mock the data
const mockPages = Array.from(Array(count).keys(), (x) => x + 1);
// Hooks
const [active, setActive] = useState(0);
const totalPages = useMemo(() => mockPages.length - 1, [mockPages]);
const canPageBack = useMemo(() => active > 0, [active, totalPages]);
const canPageNext = useMemo(() => active < totalPages, [active, totalPages]);
// Handlers
function handlePageBack() {
if (canPageBack) {
setActive((active) => active - 1);
}
}
function handlePageNext() {
if (canPageNext) {
setActive((active) => active + 1);
}
}
return (
<Pagination.Row>
<Pagination.Button prev disabled={!canPageBack} onClick={handlePageBack} />
<Pagination.PageContainer active={active} textOnly={textOnly}>
{mockPages.map((x, i) => {
return (
<Pagination.Page
key={i}
active={i === active}
onClick={() => {
setActive(i);
}}
>
{x}
</Pagination.Page>
);
})}
</Pagination.PageContainer>
<Pagination.Button prev={false} disabled={!canPageNext} onClick={handlePageNext} />
</Pagination.Row>
);
};Pagination row
The pagination row is a simple wrapper with styling pre-baked for handling the layout of pagination Button flanking a PageContainer. It handles no logic, strictly styling.
Responsiveness
Text-only mode
The PageContainer also supports a textOnly mode. Text-only pagination should be used when there is limited space, oftentimes for a responsive experience on a small screen.
Accessibility
Keyboard support
- Move focus to each page using the
tabkey, orshift+tabto move backwards - To interact with the page number when it has keyboard focus, press the
spaceorenterkey
