Rating

A score out of five stars, chosen with a press or the arrows, or shown read-only.

Usage

The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

export const RatingStyle = forSlots(RatingSlots)(Recipes.Rating({}))

export const rating = <Message>(
  style: NamedStyle<typeof RatingSlots>,
  value: Option.Option<number>,
  onChange: (value: number) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ display: 'flex', flexWrap: 'wrap', gap: '2rem', alignItems: 'end' })],
    [
      Rating.view({ id: 'preview-stay', label: 'Your stay', value, onChange, style }, h),
      Rating.view(
        {
          id: 'preview-average',
          label: 'Average of 120 reviews',
          value: Option.some(4),
          onChange,
          readOnly: true,
          style,
        },
        h,
      ),
    ],
  )

The recipe ↗This code ↗