@tryonit/react — Composants d'essayage virtuel pour React

@tryonit/react est le package que la plupart des boutiques utilisent dans TryOnIt, le SDK open source d'essayage virtuel que j'ai créé. Une seule ligne, <TryOnButton asset="/tryon/aviator.json" />, ajoute un bouton qui ouvre une fenêtre d'essayage accessible avec la caméra en direct, un sélecteur de produits, des pastilles de teintes, un curseur d'intensité, une comparaison avant/après et un aperçu de capture avec téléchargement et partage. Il s'appuie sur le moteur @tryonit/web et n'exige aucun provider dans le cas simple.

Je l'ai conçu pour qu'une boutique n'ait jamais à se battre avec l'interface. Les tokens de thème deviennent des propriétés CSS personnalisées, sans runtime CSS-in-JS. Chaque slot accepte une classe, et la feuille de style utilise des sélecteurs de faible spécificité pour que les vôtres l'emportent sans !important. Le mode unstyled retire l'habillage en gardant la mise en page et l'accessibilité, les slots remplacent des sous-composants entiers, et des hooks headless comme useTryOn et useTryOnState permettent de construire l'interface de zéro. Textes, icônes et images sont tous remplaçables, y compris en mise en page de droite à gauche.

Les données de suivi image par image ne passent jamais par l'état React : les re-rendus restent rares, et useTryOnState ne re-rend que lorsque la tranche sélectionnée change. Les composants sont compatibles SSR et livrés avec « use client », donc les pages Next.js App Router les importent directement. Le package pèse environ 8 Ko min+gzip, et sa fenêtre gère le piège de focus, la touche Échap, le retour du focus et les annonces pour lecteurs d'écran.