Pagination Changelog Block for React

Edit RELEASES at the top of the file, newest first, and PER_PAGE. The page numbers, the "Showing 5 to 8 of 12" line and the last page all come from the array, so twelve releases at four a page give three numbers and thirteen would give four, the last with one row. A release is a version, a date as an ISO day, a title, a summary and a kind.

They point at ?page=2 and so on, and the click is handled in place: the rows swap without a reload. To page on the server, drop the handlers and read page from the address in your route, or swap the state for your router's search params. Each number is an a rendered through the button's render, with an href and an onClick that stops the navigation and sets the page.

The list is drawn twice in one grid cell: the current page on top, and an unseen copy of all three pages underneath, hidden from assistive technology and the keyboard. The cell is as tall as the tallest page, so the pager stays where you clicked even when a page has shorter rows.

The pager is a labelled navigation ("Release pages") with a list of links, and the current page is marked with aria-current="page". Tab moves through Previous, the numbers and Next, and Enter changes the page. On the first page Previous, and on the last page Next, is dimmed and leaves the tab order. The line beside the pager is a polite status, so a screen reader hears "Showing 5 to 8 of 12" after a change.

Yes. The rows and the pager mirror, the Previous and Next arrows flip, and the range, dates and versions are isolated so "5 to 8 of 12" keeps its order. On a phone the rows stack, the pager shows arrows and numbers only, and nothing scrolls sideways at 320 pixels.

The header and the rows fade up once on load. Changing the page swaps the rows at once. With reduced motion the entrance is off too.