Item Pager
Step to the next or previous record of a list from its detail panel.
import { ItemPager } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a item pager in the header of a detail panel or drawer that shows one row of a list: a deal, a ticket, a message. ↓ opens the next row, ↑ the previous one, and "2 of 4" says where you are, so people work through a list without closing the panel. To move between pages of results, use Pagination. For the steps of a process, use a Stepper.
'use client'
import { useState } from 'react'
import { ItemPager } from '@youj/react'
export function TicketHeader({ tickets }: { tickets: Ticket[] }) {
const [index, setIndex] = useState(0)
return <ItemPager index={index} total={tickets.length} onIndexChange={setIndex} />
}index counts from 0 and the position shows it from 1. The stepper owns no state: onIndexChange receives the index to open, and you show that record. It never steps past either end.
Description
A item pager in a drawer header, moving through four support tickets.
Keyboard shortcuts for stepping between records.
By default J, K and the arrow keys step while focus is in the stepper. shortcuts="global" also listens for J and K on the whole page, which is what an open record drawer wants. Keys typed into a field, a combobox or editable text stay there. shortcuts="none" turns keys off. The buttons' tooltips show the keys.
The page-wide arrows are left alone: they scroll the page and move through lists.
Code
item-pager-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsindex, total, onIndexChange, shortcuts, locale (5)
Props
| Prop | Type | |
|---|---|---|
indexRequired | numberThe open record's index in the list, from 0. | – |
totalRequired | numberHow many records the list has. | – |
onIndexChangeRequired | (index: number) => voidCalled with the index to open: one up or one down. | – |
shortcuts | 'focus' | 'global' | 'none'Where the keys step: default 'focus' | 'focus' |
locale | stringFormats the position. Default: the app's locale (YoujProvider's | – |
Other props pass through: extends ComponentProps<'div'>. | ||
Other props go to the div that groups the buttons and the position. The position is formatted with locale, or the app's locale from YoujProvider.
Labelsrecords, previousRecord, nextRecord, recordOf
Labels
The group's name and the buttons' names are records, previousRecord and nextRecord in YoujProvider's labels; the position is recordOf(position, total), which receives both numbers already formatted. All fourteen built-in locales translate them.
AccessibilityKeyboard, ARIA, focus
Accessibility
- It is a
groupnamed "Records" with two buttons, "Next record" and "Previous record", each witharia-keyshortcuts. - At either end the button is disabled but stays focusable (
aria-disabled), so stepping onto the last record with the keyboard keeps focus where it was. - The position is a polite live region: "6 of 48" is announced as it changes.
- The keys don't steal typing: in a field, J and K type.