@snack-uikit/pagination

Pagination

Installation

npm i @snack-uikit/pagination

Changelog

Description

• Пакет @snack-uikit/pagination предоставляет компоненты для навигации по страницам: классическую пагинацию с кнопками-стрелками и номерами страниц (Pagination) и упрощённый слайдер (PaginationSlider).
• Компоненты поддерживают контролируемое управление текущей страницей через проп page и колбэк onChange, автоматически обрабатывают граничные состояния (первая/последняя страница) и предоставляют гибкие настройки отображения.

Pagination

Description

• Pagination — полнофункциональный компонент пагинации с кнопками навигации (стрелки влево/вправо) и номерами страниц.
• Поддерживает умное усечение страниц через проп maxLength: при большом количестве страниц показывает первую, последнюю, текущую и соседние страницы, а промежуточные заменяет на кнопку многоточия (...), при клике на которую происходит переход к средней странице в скрытом диапазоне.
• Позволяет выбрать вариант рендеринга кнопок через проп variant (button или link): в режиме link кнопки рендерятся как <a>, что полезно для SEO и навигации через URL.
• Поддерживает форматирование ссылок через проп hrefFormatter для генерации URL каждой страницы при использовании варианта link.
• Имеет два размера (size: 'xs' | 's') для адаптации под разные контексты использования.
• Автоматически отключает кнопки навигации на первой и последней странице.
• Figma: Pagination.

Example

import { Pagination } from '@snack-uikit/pagination';
import { useState } from 'react';

function Example() {
  const [page, setPage] = useState(1);

  return (
    <Pagination
      page={page}
      onChange={setPage}
      total={10}
      maxLength={7}
      size="s"
      variant="button"
      hrefFormatter={(page) => `/cases/${page}`}
    />
  );
}

PaginationSlider

Description

• PaginationSlider — упрощённый компонент пагинации в виде слайдера, отображающий все страницы как последовательность кнопок без навигационных стрелок.
• Компонент всегда показывает все страницы без усечения, что делает его удобным для случаев с небольшим количеством страниц (обычно до 10–15).
• Имеет компактный визуальный стиль в виде слайдера с активированной текущей страницей, подходящий для второстепенных интерфейсов или мобильных версий.
• Не поддерживает варианты рендеринга и форматирование ссылок, фокусируясь на простом и быстром переключении между страницами.
• Figma: PaginationSlider.

Example

import { PaginationSlider } from '@snack-uikit/pagination';
import { useState } from 'react';

function Example() {
  const [page, setPage] = useState(1);

  return (
    <PaginationSlider
      page={page}
      onChange={setPage}
      total={10}
    />
  );
}

TODO

• обновить цвета pagination slider после переработки палитры
• подумать о семантике кнопок навигации (возможно, использовать ссылки вместо кнопок и добавлять на них href)
• пересмотреть механизм переключения страницы при нажатие на многоточие

Pagination

Props

name	type	default value	description
onChange*	(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void	-	Колбэк смены значения
page*	number	-	Текущая страница
total*	number	-	Общее количество страниц
variant	enum Variant: "link", "button"	button	Варианты тега кнопок: или
maxLength	number	7	Максимальное количество страниц/элементов, помещающихся до транкейта
hrefFormatter	(page: number) => string	-	Колбэк форматирования ссылки
className	string	-	CSS класснейм
size	enum Size: "xs", "s"	s	Размер

PaginationSlider

Props

name	type	default value	description
onChange*	(page: number) => void	-	Колбек смены значения
page*	number	-	Текущая страница
total*	number	-	Общее количество страниц
className	string	-	CSS класснейм