Планировщик и таблица данных есть и в React — в пакете @needless-ui/react: те же возможности, управление с клавиатуры и доступность, что и в Angular, та же таблица стилей и та же лицензия MIT. Остальные компоненты на подходе. Им нужен React 19, и они работают с Next.js App Router и с Vite.
Установка
pnpm add @needless-ui/react @needless-ui/cssИмпорт стилей
Компоненты поставляются без стилей. Импортируйте таблицу стилей один раз — в CSS-файле приложения.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Слои работают так же, как в Angular: сбросы помещаются в слой до nui, а с Tailwind CSS слой nui стоит между базовым слоем Tailwind и его утилитами, как показано в руководстве «Начало работы».
Планировщик
У каждого компонента своя точка входа. Планировщик показывает переданные events и сообщает, когда событие переносят или выбирают время для нового: хранить события — ваша задача.
Таблица данных
Описывайте columns вне компонента, чтобы таблица не повторяла работу при каждом рендере. Правка вызывает onRowsChange с новыми строками, а методы вроде экспорта в Excel доступны через ref таблицы.
API в терминах React
Компоненты React следуют тем же спецификациям, что и компоненты Angular, поэтому их API совпадают с поправкой на термины React. Все пропсы перечислены на страницах API планировщика и таблицы данных.
| Angular | React |
|---|---|
Модель, [(view)] | Состояние: view с onViewChange или defaultView, чтобы его хранил компонент |
Выходное свойство, (eventClick) | Колбэк, onEventClick |
Шаблон, <ng-template nuiSchedulerEvent> | Функция отрисовки, renderEvent |
Метод, scheduler.next() | Метод через ref, ref.current.next() |
children для древовидных данных | getChildren: в React children — это вложенные элементы |
locale, по умолчанию — LOCALE_ID приложения | locale, по умолчанию — en-US |
Серверный рендеринг
Оба компонента рендерятся на сервере и гидратируются. Пакет помечает их как клиентские компоненты, поэтому Server Component может рендерить их с сериализуемыми пропсами, а вспомогательные функции вроде nuiSchedulerFromIcs работают на сервере. Колбэки нельзя передать с сервера в браузер: компонент, который их принимает, помещают в собственный клиентский компонент, как в двух примерах выше.
То, что зависит от читателя, ждёт браузера: линия текущего времени в планировщике и то, какой сегодня день. Если планировщик рендерит сервер, задайте defaultDate: у сервера может быть другое «сегодня», чем у читателя.