<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

productstringObligatorio

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

idstringOpcional

classNamestringOpcional

styleCSSPropertiesOpcional

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

The element is shown and connected.

onSize(e: SizeEvent) => voidOpcional

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

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

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

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

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

onRecommendation(r: Recommendation) => voidOpcional

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.

demoDemoOptionsOpcional

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

Propiedades

bodystringObligatorio

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

heightnumberOpcional

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");