<FitButton>

Component@tryyoursize/react

A compact “Find my size” button that opens the measuring window.

Pass a ref to get an ElementHandle (open(), close(), getRecommendation(), getElement()).

FitButton: ForwardRefExoticComponent<ElementProps & RefAttributes<ElementHandle>>

Props

productstringRequired

Your product identifier, as synced to TryYourSize. Changing it updates the element in place.

idstringOptional

classNamestringOptional

styleCSSPropertiesOptional

onReady(e: ElementEvents["ready"]) => voidOptional

The element is shown and connected.

onSize(e: SizeEvent) => voidOptional

The shopper got a size for this product: preselect the variant.

onOpen(e: ElementEvents["open"]) => voidOptional

onClose(e: ElementEvents["close"]) => voidOptional

onLoadError(e: ElementEvents["loaderror"]) => voidOptional

Our window could not be reached (network, CSP).

onRecommendation(r: Recommendation) => voidOptional

The shopper's recommended size in your size labels: on mount when they are already connected, and on every change. Sizes only. Preselect your picker.

Example

ReactJavaScript

<FitButton product="SKU-123" onSize={({ size }) => setSize(size)} />

elements.create("button", { product: "SKU-123" }).mount("#find-my-size");