# Inicio rápido de React

> @tryyoursize/react: un provider cerca de la raíz y componentes de elemento donde los necesites. Compatible con SSR.

Source: https://docs.tryyoursize.com/es/quickstarts/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.

```bash
npm install @tryyoursize/react @tryyoursize/sdk
```

## Inicio rápido

```tsx

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

  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](https://docs.tryyoursize.com/es/guides/appearance.md). 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](https://docs.tryyoursize.com/es/guides/recommendation-event.md). |
| `onReady`, `onOpen`, `onClose`, `onLoadError` | Los eventos del SDK con el mismo nombre. |
| `id`, `className`, `style` | Se aplican al `<div>` de montaje. |

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

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

```tsx
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](https://docs.tryyoursize.com/es/guides/server-side-recommendations.md)).
- `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.