React reference (@tryyoursize/react)

SDK@tryyoursize/reactv0.1.0

React components for TryYourSize.js: 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

npm install @tryyoursize/react @tryyoursize/sdk

Quick example

React

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

const tysPromise = loadTryYourSize("pk_test_…");

export function ProductPage({ sku }: { sku: string }) {
  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	Creates (or adopts) the TryYourSize client and its elements group for the components inside it.
useTryYourSize()	The TryYourSize client, or null until it has loaded.
useElements()	The provider’s Elements group, or null until the client has loaded.

Components

SizeGuide	A link-sized “Size guide” with the TryYourSize mark, for the spot next to your size picker.
FitButton	A compact “Find my size” button that opens the measuring window.
FitElement	The inline element (sign-in and “your body is ready” in your page).
ElementHandle	What a ref on <SizeGuide>, <FitButton> or <FitElement> gives you.