Inicio rápido de React

Para tu equipo de desarrollo

Qué hace: Añade componentes de TryYourSize a nuestra tienda en React: una guía de tallas junto al selector de tallas y la talla recomendada con nuestras propias etiquetas. Solo recibimos tallas.

Tiempo necesario: Una tarde.

Qué enviarle: La clave publicable (pk_test_…) y los orígenes de nuestros sitios que hay que registrar en Studio.

Los componentes funcionan como @stripe/react-stripe-js: un provider cerca de la raíz de tu app y componentes de elemento donde los quieras.

npm install @tryyoursize/react @tryyoursize/sdk

Inicio rápido

import { useState } from "react";
import { loadTryYourSize } from "@tryyoursize/sdk/loader";
import { TryYourSizeProvider, FitElement } from "@tryyoursize/react";

// Una sola vez, fuera del render, para no crear un cliente nuevo en cada render.
const tysPromise = loadTryYourSize("pk_test_…");

export function App() {
  return (
    <TryYourSizeProvider client={tysPromise} options={{ appearance: { variables: { borderRadius: 4 } } }}>
      <ProductPage />
    </TryYourSizeProvider>
  );
}

function ProductPage() {
  const [size, setSize] = useState<string | null>(null);
  return (
    <>
      <SizePicker value={size} onChange={setSize} />
      <FitElement product="SKU-123" onSize={({ size }) => setSize(size)} />
    </>
  );
}

Si incluyes el SDK desde npm en lugar de cargarlo desde nuestro CDN, pasa la clave: <TryYourSizeProvider publishableKey="pk_test_…">.

<TryYourSizeProvider>

Prop
publishableKey	Tu clave publicable. El provider crea el cliente en el navegador.
client	En lugar de publishableKey, un cliente o una promesa de un cliente (por ejemplo, loadTryYourSize()). null significa «todavía no»: los elementos esperan.
options.appearance	Consulta Apariencia. Los cambios se aplican en directo; un objeto inline no provoca actualizaciones en cada render.
options.locale	"auto" o un idioma. Se lee una sola vez, al crear el cliente.

El cliente no puede cambiar una vez definido; si cambia, el provider muestra un aviso y mantiene el primer cliente.

Componentes

• <SizeGuide>: la guía de tallas del tamaño de un enlace, junto a tu selector de tallas. variant="link" o "button".
• <FitElement>: el elemento integrado (recomendado). <FitButton>: el botón compacto «Encontrar mi talla».

Prop
product (obligatoria)	Tu ID de producto o SKU. Al cambiarla se llama a update({ product }), sin crear un elemento nuevo.
onSize	({ product, size, verified }) => void: el cliente ha elegido una talla en nuestra ventana.
onRecommendation	({ product, status, size, studioSize, wearableSizes }) => void. Consulta Talla recomendada.
onReady, onOpen, onClose, onLoadError	Los eventos del SDK con el mismo nombre.
id, className, style	Se aplican al <div> de montaje.

<SizeGuide
  product="SKU-123"
  onRecommendation={({ status, size }) => status === "ready" && !touched && setSize(size!)}
/>

Una ref te da { open(), close(), getElement() }:

const fit = useRef<ElementHandle>(null);
<button onClick={() => fit.current?.open()}>Measure me</button>
<FitElement ref={fit} product="SKU-123" />

Hooks

• useTryYourSize() devuelve el cliente, o null hasta que se haya cargado. Úsalo para los métodos del cliente, por ejemplo await tys.recommendationHandle() para enviar un identificador sellado a tu servidor (Recomendaciones desde el servidor).
• useElements() devuelve el grupo de elementos del provider, o null hasta que se haya cargado: úsalo para elements.update({ appearance }).

Garantías

• Se monta en el commit y se destruye al desmontar. Con <StrictMode> solo hay un iframe activo en cada momento.
• Compatible con SSR. Importar y renderizar en el servidor nunca accede a window; en el servidor obtienes un <div> de montaje vacío.
• Handlers estables. Cambiar un handler de evento nunca recarga el iframe.