Escolha uma biblioteca
Antes de qualquer decisão, aplique product-ui §1 (o diário de gosto e precedência) e §5 (qual skill é responsável pelo quê). Uma regra do diário que nomeie uma biblioteca tem precedência.
Quando invocado sem uma tarefa, peça uma em uma única linha e pare.
Ordem de decisão
Percorra estas etapas de cima para baixo. Pare na primeira que resolver completamente a tarefa.
- O que já está instalado? Leia o
package.json. Se uma biblioteca listada ou concorrente já fizer o trabalho, use-a. Aponte uma escolha melhor em uma linha e nunca troque uma dependência sem ser solicitado. Por quê: uma segunda biblioteca para a mesma tarefa duplica o bundle e as convenções. - A plataforma resolve completamente? Consulte a tabela abaixo. Por quê: a plataforma não tem custo de bundle, caminho de atualização nem risco de abandono.
- A lista tem uma entrada? Abra references/catalogue.md, encontre a categoria e pegue a entrada marcada como Default. Recomende uma biblioteca, não um menu.
- Essa entrada é mantida? Verifique a coluna de status. Se disser Unmaintained, nunca a recomende; use a substituição nomeada na entrada.
- Nada se encaixa? Diga "esta tarefa não está na lista", então escolha com base no seu próprio conhecimento e execute a verificação abaixo nela. Por quê: um pacote não verificado é a maneira usual de código abandonado entrar.
"Resolver completamente" significa que todos os requisitos da tarefa são atendidos, incluindo comportamento de teclado, foco e leitor de tela. Se um requisito falhar, vá para o passo 3.
Plataforma primeiro
| Tarefa | Resposta da plataforma | Mude para uma biblioteca quando |
|---|---|---|
| Modal | <dialog> com showModal() | Você precisar de diálogos empilhados com saída animada nos navegadores que você suporta, ou gerenciamento de foco não modal |
| Popover, painel suspenso, cartão tipo tooltip | Atributo popover, mais posicionamento CSS anchor quando suportado | Você precisar de virada de colisão em todos os lugares, ou um menu com foco circulante |
| Accordion, disclosure | <details name> | Você precisar de estado controlado ou altura animada além de interpolate-size |
| Modo escuro sem alternador | prefers-color-scheme, color-scheme, light-dark() | O usuário escolher o tema manualmente e ele precisar persistir |
| Entrada de data, hora, mês | <input type="date"> e seus similares | Você precisar de intervalos, um calendário personalizado ou uma aparência consistente |
| Formatação de número, tempo relativo, plurais, listas | Intl.NumberFormat, RelativeTimeFormat, PluralRules, ListFormat | Nunca. Sempre use Intl |
| Código único, campo único | <input autocomplete="one-time-code" inputmode="numeric"> | Você precisar de uma caixa por dígito |
| Movimento de entrada, saída e layout | Transições CSS, @starting-style, WAAPI, View Transitions | Você precisar de molas, gestos ou animação de layout interrompível |
| Validação de formulário | Validação de restrição (required, pattern, setCustomValidity) | Você precisar de regras entre campos ou assíncronas, ou um esquema tipado |
| Select com poucas opções | <select> | Você precisar de pesquisa, seleção múltipla ou linhas ricas |
| Cabeçalhos fixos, scroll snap, listas preguiçosas | CSS position: sticky, scroll-snap, content-visibility: auto | A lista tiver 1.000+ linhas |
Pares
| Quebrado | Corrigido | Por quê |
|---|---|---|
Um modal <div> com uma armadilha de foco escrita à mão | <dialog> e showModal() | Armadilha de foco, Esc e fundo inerte vêm de graça |
npm i react-beautiful-dnd | @dnd-kit/react | O primeiro está obsoleto e sem manutenção |
npm i vaul para uma gaveta | Base UI Drawer, ou <dialog> estilizado como folha | O próprio README do vaul diz que está sem manutenção |
| Um toast construído a partir de uma biblioteca de modal | Base UI Toast | Empilhamento, pausa ao passar o mouse e deslizar já estão resolvidos |
setInterval contando um número | NumberFlow | Dígitos giram com layout correto e movimento reduzido |
5.000 <tr> renderizadas de uma vez | TanStack Virtual sob TanStack Table, ou Virtuoso para listas | O custo de renderização cresce com as linhas, não com a viewport |
new Intl.NumberFormat substituído por um pacote de moeda | Intl.NumberFormat | Regras de localidade estão no navegador |
Verifique antes de recomendar
Execute isto em qualquer pacote, listado ou não. Um status do catálogo pode ser mais antigo que sua sessão.
npm view <pkg> time.modified license version
- Mantido: última publicação nos últimos 12 meses, ou um push no repositório nos últimos 6 meses com uma versão publicada.
- Lento: completo em funcionalidades, sem publicação por 12–24 meses, repositório ainda respondendo a issues. Utilizável. Diga que é lento.
- Sem manutenção: arquivado, um README que diz isso, ou sem publicação por 24+ meses com falhas abertas. Nunca recomende.
- Leia a licença. Informe qualquer coisa que não seja MIT, ISC, BSD ou Apache-2.0 (MPL-2.0 e AGPL precisam de uma nota).
- Verifique as dependências de pares em relação à versão do React do projeto.
Formato da resposta
Um bloco, sem menu:
Base UI Toast para toasts. Ele empilha, pausa ao passar o mouse e desliza. Não para nada que precise de ação; isso permanece na tela. MIT, mantido.
npm i @base-ui/react.
Sempre forneça: para o que serve, quando não usar, licença, status com a data que você viu.
Antes de terminar
- O
package.jsonfoi lido e a escolha não duplica uma biblioteca instalada. - A resposta da plataforma foi verificada e, se ignorada, a razão é uma cláusula.
- O
npm viewfoi executado na escolha e o status na resposta é o de hoje, não o do catálogo. - Nada marcado como Unmaintained é recomendado.