@tryonit/react — Componentes de prueba virtual para React

@tryonit/react es el paquete que usan la mayoría de las tiendas dentro de TryOnIt, el SDK open source de prueba virtual que creé. Una sola línea, <TryOnButton asset="/tryon/aviator.json" />, añade un botón que abre un diálogo accesible con la cámara en vivo, un selector de productos, muestras de tonos, un control de intensidad, una comparación de antes y después y una vista previa de la captura con descarga y opción de compartir. Se apoya en el motor @tryonit/web y no necesita provider en el caso simple.

Lo diseñé para que una tienda nunca tenga que pelearse con la interfaz. Los tokens del tema se convierten en propiedades CSS personalizadas, sin runtime de CSS-in-JS. Cada slot acepta una clase, y la hoja de estilos usa selectores de baja especificidad para que las tuyas ganen sin !important. El modo unstyled quita el aspecto visual pero conserva la maquetación y la accesibilidad, los slots sustituyen subcomponentes completos y los hooks headless como useTryOn y useTryOnState permiten construir la interfaz desde cero. Todos los textos, iconos e imágenes se pueden sustituir, incluidas las maquetaciones de derecha a izquierda.

Los datos de seguimiento de cada fotograma nunca pasan por el estado de React, así que los re-renders son escasos, y useTryOnState solo vuelve a renderizar cuando cambia la parte del estado que seleccionas. Los componentes son compatibles con SSR e incluyen «use client», por lo que las páginas del App Router de Next.js los importan directamente. El paquete ocupa unos 8 KB min+gzip y su diálogo incluye trampa de foco, cierre con Escape, retorno del foco y avisos para lectores de pantalla.