SizeGuide (Compose)

Componentcom.tryyoursize:tryyoursize-android

The “Size guide” button: “Size guide” → “Calculating your size…” → “Your size: M”. A tap opens the window.

@Composable
public fun SizeGuide(
    client: TryYourSize,
    product: String,
    modifier: Modifier = Modifier,
    variant: SizeGuideVariant = SizeGuideVariant.LINK,
    label: String? = null,
    textStyle: TextStyle = TextStyle(fontSize = 15.sp),
    onRecommendation: ((Recommendation) -> Unit)? = null,
)

Parameters

clientTryYourSizeRequired

Your client.

productStringRequired

Your product ID or SKU.

modifierModifierOptional= Modifier

Compose modifier.

variantSizeGuideVariantOptional= SizeGuideVariant.LINK

LINK (32 dp tall, 48 dp touch target) or BUTTON.

labelString?Optional= null

your own words instead of "Size guide".

textStyleTextStyleOptional= TextStyle(fontSize = 15.sp)

your text style (font, size); the colour defaults to the app theme's text colour.

onRecommendation((Recommendation) -> Unit)?Optional= null

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

Example

KotlinSwiftReact NativeFlutter

// 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
}

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

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

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