pbcomponents

Установка, настройка и справочник компонентов React.

@prosazhin/pbcomponents — библиотека компонентов для React 19. Справочник охватывает компоненты, хелперы, провайдеры и хуки с примерами и сигнатурами API.

Ресурсы: GitHub · npm · Figma Community · Behance.

Установка

npm install @prosazhin/pbcomponents @prosazhin/pbstyles

Пакет компонентов использует React 19 как peer dependency и Tailwind CSS 4. Для фирменных токенов подключите pbstyles в глобальном CSS:

@import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';

Первая кнопка

import { Button } from '@prosazhin/pbcomponents';

export default function Example() {
  return (
    <Button
      size='m'
      color='primary'
      theme='filled'
    >
      Сохранить
    </Button>
  );
}

Диалоги и уведомления

Если используете Dialog, Notification или связанные хуки, оберните приложение в PBCProvider один раз:

import { PBCProvider } from '@prosazhin/pbcomponents';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <PBCProvider notifications={{ top: 80 }}>{children}</PBCProvider>;
}

На этом сайте провайдер расположен в корневом layout. Для остальных компонентов дополнительный провайдер не нужен.

Тема и ссылки Next.js

Цвета компонентов берутся из pbstyles. Без настройки они следуют prefers-color-scheme; data-theme="dark" или data-theme="light" на <html> либо контейнере задаёт режим вручную.

Компоненты с href (Button, Tab, DropdownItem, Tag) принимают linkComponent, если вместо обычной ссылки нужен next/link:

import NextLink from 'next/link';
import { Button } from '@prosazhin/pbcomponents';

<Button
  href='/projects'
  linkComponent={NextLink}
>
  Проекты
</Button>;

Справочник

Компоненты

Экспорт	Назначение
Container	Контейнер страницы с основным содержимым и боковыми областями.
Headline	Заголовок с управляемым семантическим уровнем.
Button	Действие или ссылка с размером, цветом, темой и состоянием загрузки.
ButtonGroup	Группа кнопок одного размера.
Tag	Интерактивная метка, ссылка или фильтр.
Badge	Небольшая текстовая метка статуса или категории.
Field	Обёртка для подписи, контрола, подсказки и ошибки.
Input	Однострочное поле ввода с дополнениями.
Textarea	Многострочное поле ввода.
Search	Поиск и выбор вариантов из списка.
Select	Выбор одного или нескольких вариантов из списка.
Checkbox	Независимый флажок с подписью.
CheckboxGroup	Группа флажков с массивом выбранных значений.
Radio	Один вариант в наборе взаимно исключающих ответов.
RadioGroup	Группа радиокнопок с одним выбранным значением.
InlineRadio	Компактный вариант радио-кнопки.
InlineRadioGroup	Группа компактных вариантов выбора.
Switch	Переключатель булевой настройки.
Tabs	Набор вкладок с выбранным индексом.
Tab	Одна вкладка для Tabs или самостоятельной навигации.
Collapse	Раскрываемый блок с заголовком.
CollapseGroup	Группа раскрываемых блоков.
Dropdown	Раскрывающееся меню с триггером и содержимым.
DropdownItem	Отдельный пункт меню: действие или ссылка.
Dialog	Модальное окно с триггером, секциями и закрытием.
Alert	Встроенное сообщение о состоянии с заголовком и действиями.
Notification	Всплывающее сообщение с таймером и прогрессом.

Хелперы

Экспорт	Назначение
Content	Текст с иконками слева и справа.
Icon	SVG-иконка с заданным размером.
Text	Текст с размером и весом, выбираемым через пропсы.

Провайдеры

Экспорт	Назначение
DialogProvider	Контекст для управления диалогами из дочерних компонентов.
NotificationsProvider	Контекст для вызова уведомлений из любой вложенной части.
PBCProvider	Общий провайдер диалогов и уведомлений.

Хуки

Экспорт	Назначение
useClickOutside	Вызывает callback при клике или касании вне переданных элементов.
useControllableState	Состояние, которое может управляться пропсом value или храниться внутри компонента.
useCountdown	Возвращает прогресс таймера от 0 до 100 с поддержкой паузы.
useDialog	Читает диалоги из DialogProvider и закрывает активный или указанный диалог.
useHoverControllable	Отслеживает наведение как управляемое или внутреннее состояние.
useKeydown	Вызывает callback при нажатии указанных клавиш.
useMergeRefs	Объединяет несколько React ref в один callback ref.
useNotifications	Читает уведомления и предоставляет методы показа и скрытия.
useScreenSize	Возвращает ширину и высоту окна, обновляясь при resize.
useShowDialog	Регистрирует диалог и возвращает функцию его открытия.

Типы доступны из корня пакета и @prosazhin/pbcomponents/types. На страницах экспортов приведены примеры и сигнатуры API.

На этой странице