O agendador e a grade de dados também são componentes React, em @needless-ui/react: as mesmas funcionalidades, o mesmo comportamento de teclado e a mesma acessibilidade do Angular, a mesma folha de estilo e a mesma licença MIT. Os outros componentes estão a caminho. Os dois precisam do React 19 e funcionam com o Next.js App Router e com o Vite.
Instalação
pnpm add @needless-ui/react @needless-ui/cssImporte os estilos
Os componentes não trazem estilos. Importe a folha de estilo uma única vez, a partir de um arquivo CSS da sua aplicação.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';As camadas funcionam como no Angular: os resets vão em uma camada antes de nui e, com o Tailwind CSS, nui fica entre a base do Tailwind e os utilitários dele, como mostra o guia Primeiros passos.
Um agendador
Cada componente tem o próprio ponto de entrada. O agendador mostra os events que você passa e avisa quando alguém move um deles ou escolhe um horário para um novo: quem guarda os eventos é você.
Uma grade de dados
Descreva as columns fora do componente, para que a grade não refaça o trabalho a cada renderização. Uma edição chama onRowsChange com as novas linhas, e métodos como a exportação para Excel ficam na ref da grade.
A API do jeito do React
Os componentes React seguem as mesmas especificações dos componentes Angular, então as APIs deles se correspondem, do jeito do React. As páginas da API listam todas as props: as do agendador e as da grade de dados.
| Angular | React |
|---|---|
Um model, [(view)] | Estado: view com onViewChange, ou defaultView para o componente guardar |
Um output, (eventClick) | Um callback, onEventClick |
Um template, <ng-template nuiSchedulerEvent> | Uma função que desenha, renderEvent |
Um método, scheduler.next() | Um método na ref, ref.current.next() |
children, para dados em árvore | getChildren: o React reserva children para elementos |
locale, por padrão o LOCALE_ID da aplicação | locale, por padrão en-US |
Renderização no servidor
Os dois componentes são renderizados no servidor e hidratados no navegador. O pacote os marca como componentes de cliente, então um Server Component pode renderizá-los com props serializáveis, e funções auxiliares como nuiSchedulerFromIcs rodam no servidor. Callbacks não passam para o navegador: um componente que os recebe fica dentro de um componente de cliente próprio, como os dois acima.
O que depende de quem lê espera pelo navegador: a linha da hora atual do agendador e qual é o dia de hoje. Passe um defaultDate ao agendador quando um servidor o renderizar, já que o dia de hoje no servidor pode não ser o mesmo de quem lê.