<FitElement>

Component@tryyoursize/react

The inline element (sign-in and “your body is ready” in your page). Recommended.

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

FitElement: 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.

demoDemoOptionsOptional

<FitElement> only, test keys only: demo mode on a named sample body, no sign-in (landing pages). Changing demo.body switches the body in place.

Properties

bodystringRequired

A sample body id, e.g. sample-female-165.

heightnumberOptional

Height of the element in px (default 640).

Example

ReactJavaScript

<FitElement product="STRAIGHT-JEANS" onSize={({ size }) => selectVariant(size)} />

elements.create("fit", { product: "STRAIGHT-JEANS" }).mount("#tys-fit");