<SizeGuide>

Component@tryyoursize/react-native

The native “Size guide” button: “Size guide” → “Calculating your size…” → “Your size: M”.

function SizeGuide({ product, variant = "link", label, style, onRecommendation }: SizeGuideProps)

Props

productstringRequired

variant"link" | "button"Optional

"link" (default): link-sized text with the mark. "button": a small bordered button.

labelstringOptional

Your own words instead of "Size guide".

styleStyleProp<ViewStyle>Optional

onRecommendation(r: Recommendation) => voidOptional

The shopper's recommended size, on show and on every change (sizes only).

Example

React NativeSwiftKotlinFlutter

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

// SwiftUI, where your "Size guide" link was
SizeGuide(client: tys, product: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}

// Compose, where your "Size guide" link was
SizeGuide(tys, "SKU-123", textStyle = MaterialTheme.typography.bodyMedium) { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}

const SizeGuide(product: 'SKU-123') // listen to tys.onRecommendation to preselect