# React reference (@tryyoursize/react)

> A provider, hooks and element components for TryYourSize.js, shaped like @stripe/react-stripe-js.

Source: https://docs.tryyoursize.com/reference/react/

*SDK* · `@tryyoursize/react` · v0.1.0

React components for [TryYourSize.js](https://docs.tryyoursize.com/reference/web.md): wrap your app (or product page) in `TryYourSizeProvider`, then render `SizeGuide`, `FitButton` or `FitElement` where shoppers choose a size. Components mount on commit and are destroyed on unmount (StrictMode safe); changing `product` updates the element in place; changing a callback never reloads anything. Nothing touches `window` during render, so server-side rendering works.

## Install

**npm**

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

## Quick example

**React**

```tsx

const tysPromise = loadTryYourSize("pk_test_…");

  const [size, setSize] = useState<string>();
  return (
    <TryYourSizeProvider client={tysPromise}>
      <SizeGuide product={sku} onRecommendation={(r) => r.status === "ready" && setSize(r.size ?? undefined)} />
    </TryYourSizeProvider>
  );
}
```

## Provider and hooks

| | |
|---|---|
| [`TryYourSizeProvider`](https://docs.tryyoursize.com/reference/react/tryyoursize-provider.md) | Creates (or adopts) the TryYourSize client and its elements group for the components inside it. |
| [`useTryYourSize()`](https://docs.tryyoursize.com/reference/react/use-tryyoursize.md) | The TryYourSize client, or null until it has loaded. |
| [`useElements()`](https://docs.tryyoursize.com/reference/react/use-elements.md) | The provider's Elements group, or null until the client has loaded. |

## Components

| | |
|---|---|
| [`SizeGuide`](https://docs.tryyoursize.com/reference/react/size-guide.md) | A link-sized "Size guide" with the TryYourSize mark, for the spot next to your size picker. |
| [`FitButton`](https://docs.tryyoursize.com/reference/react/fit-button.md) | A compact "Find my size" button that opens the measuring window. |
| [`FitElement`](https://docs.tryyoursize.com/reference/react/fit-element.md) | The inline element (sign-in and "your body is ready" in your page). |
| [`ElementHandle`](https://docs.tryyoursize.com/reference/react/element-handle.md) | What a ref on <SizeGuide>, <FitButton> or <FitElement> gives you. |