Choisir une bibliothèque
Avant toute décision, appliquez product-ui §1 (le journal des goûts et des précédents) et §5 (quelle compétence possède quoi). Une règle de journal qui nomme une bibliothèque l'emporte.
Lorsqu'elle est invoquée sans tâche, demandez-en une en une seule ligne et arrêtez-vous.
Ordre de décision
Parcourez ces étapes de haut en bas. Arrêtez-vous à la première étape qui résout complètement la tâche.
- Qu'est-ce qui est déjà installé ? Lisez
package.json. Si une bibliothèque répertoriée ou un concurrent fait déjà le travail, utilisez-la. Signalez un meilleur choix en une ligne, et ne changez jamais une dépendance sans qu'on vous le demande. Pourquoi : une deuxième bibliothèque pour le même travail double le bundle et les conventions. - Est-ce que la plateforme le résout complètement ? Consultez le tableau ci-dessous. Pourquoi : la plateforme n'a aucun coût de bundle, ni de chemin de mise à jour, ni de risque d'abandon.
- La liste a-t-elle une entrée ? Ouvrez references/catalogue.md, trouvez la catégorie et prenez l'entrée marquée Par défaut. Recommandez une seule bibliothèque, pas un menu.
- Cette entrée est-elle maintenue ? Vérifiez la colonne statut. Si elle indique Non maintenu, ne la recommandez jamais ; utilisez le remplacement nommé dans l'entrée.
- Rien ne correspond ? Dites « cette tâche n'est pas dans la liste », puis choisissez à partir de vos propres connaissances et exécutez la vérification ci-dessous sur celle-ci. Pourquoi : un paquet non vérifié est la façon habituelle dont le code abandonné s'installe.
« Résout complètement » signifie que chaque exigence de la tâche est satisfaite, y compris le comportement au clavier, le focus et le lecteur d'écran. Si une exigence échoue, passez à l'étape 3.
Plateforme d'abord
| Tâche | Réponse de la plateforme | Passer à une bibliothèque lorsque |
|---|---|---|
| Modale | <dialog> avec showModal() | Vous avez besoin de dialogues empilés avec une sortie animée sur les navigateurs que vous supportez, ou d'une gestion de focus non modale |
| Popover, panneau déroulant, carte de type infobulle | Attribut popover, plus positionnement ancré CSS là où c'est supporté | Vous avez besoin d'un retournement de collision partout, ou d'un menu à focus rotatif |
| Accordéon, divulgation | <details name> | Vous avez besoin d'un état contrôlé ou d'une hauteur animée au-delà de interpolate-size |
| Mode sombre sans bascule | prefers-color-scheme, color-scheme, light-dark() | L'utilisateur choisit le thème manuellement et il doit persister |
| Saisie de date, heure, mois | <input type="date"> et ses homologues | Vous avez besoin de plages, d'un calendrier personnalisé ou d'un aspect cohérent |
| Formatage de nombre, temps relatif, pluriels, listes | Intl.NumberFormat, RelativeTimeFormat, PluralRules, ListFormat | Jamais. Utilisez toujours Intl |
| Code à usage unique, champ unique | <input autocomplete="one-time-code" inputmode="numeric"> | Vous avez besoin d'une case par chiffre |
| Mouvement d'entrée, de sortie et de mise en page | Transitions CSS, @starting-style, WAAPI, Transitions de vue | Vous avez besoin de ressorts, de gestes ou d'animations de mise en page interruptibles |
| Validation de formulaire | Validation par contrainte (required, pattern, setCustomValidity) | Vous avez besoin de règles inter-champs ou asynchrones, ou d'un schéma typé |
| Sélection avec peu d'options | <select> | Vous avez besoin de recherche, de sélection multiple ou de lignes riches |
| En-têtes collants, défilement par accroche, listes paresseuses | CSS position: sticky, scroll-snap, content-visibility: auto | La liste contient 1 000+ lignes |
Paires
| Casser | Corriger | Pourquoi |
|---|---|---|
Une modale <div> avec un piège à focus écrit à la main | <dialog> et showModal() | Le piège à focus, Échap et l'arrière-plan inerte sont gratuits |
npm i react-beautiful-dnd | @dnd-kit/react | Le premier est déprécié et non maintenu |
npm i vaul pour un tiroir | Base UI Drawer, ou <dialog> stylisé comme une feuille | Le propre README de vaul dit qu'il est non maintenu |
| Un toast construit à partir d'une bibliothèque de modales | Base UI Toast | L'empilement, la pause au survol et le balayage sont déjà résolus |
setInterval comptant un nombre | NumberFlow | Les chiffres défilent avec une mise en page correcte et un mouvement réduit |
5 000 <tr> rendues en une fois | TanStack Virtual sous TanStack Table, ou Virtuoso pour les listes | Le coût de rendu augmente avec les lignes, pas avec la fenêtre d'affichage |
new Intl.NumberFormat remplacé par un paquet de devises | Intl.NumberFormat | Les règles de locale sont livrées dans le navigateur |
Vérifiez avant de recommander
Exécutez ceci sur n'importe quel paquet, qu'il soit répertorié ou non. Un statut de catalogue peut être plus ancien que votre session.
npm view <pkg> time.modified license version
- Maintenu : dernière publication dans les 12 mois, ou un push de dépôt dans les 6 mois avec une version publiée.
- Lent : fonctionnalités complètes, pas de publication depuis 12 à 24 mois, le dépôt répond toujours aux problèmes. Utilisable. Dites qu'il est lent.
- Non maintenu : archivé, un README qui le dit, ou pas de publication depuis 24+ mois avec des dysfonctionnements ouverts. Ne le recommandez jamais.
- Lisez la licence. Signalez tout ce qui n'est pas MIT, ISC, BSD ou Apache-2.0 (MPL-2.0 et AGPL nécessitent une note).
- Vérifiez les dépendances par rapport à la version de React du projet.
Format de réponse
Un bloc, pas de menu :
Base UI Toast pour les toasts. Il s'empile, s'arrête au survol et se glisse. Pas pour tout ce qui nécessite une action ; cela reste à l'écran. MIT, maintenu.
npm i @base-ui/react.
Donnez toujours : à quoi ça sert, quand ne pas l'utiliser, licence, statut avec la date à laquelle vous l'avez vu.
Avant de terminer
package.jsona été lu, et le choix ne duplique pas une bibliothèque installée.- La réponse de la plateforme a été vérifiée et, si elle a été ignorée, la raison est une seule clause.
npm viewa été exécuté sur le choix, et le statut dans la réponse est celui d'aujourd'hui, pas celui du catalogue.- Rien marqué Non maintenu n'est recommandé.