<SizeGuide>

Component@tryyoursize/react

A link-sized “Size guide” with the TryYourSize mark, for the spot next to your size picker. Shows “Your size: M” when the shopper is connected.

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

SizeGuide: ForwardRefExoticComponent<SizeGuideProps & RefAttributes<ElementHandle>>

Props

variant"link" | "button"Optional

A text link (default) or an outlined button.

labelstringOptional

Your own words for "Size guide" (otherwise localized).

Example

ReactJavaScriptHTML

<SizeGuide
  product="SKU-123"
  variant="link"
  onRecommendation={(r) => r.status === "ready" && !touched && setSize(r.size!)}
/>

elements.create("sizeGuide", { product: "SKU-123", variant: "link" }).mount("#size-guide");

<tys-size-guide publishable-key="pk_test_…" product="SKU-123"></tys-size-guide>