DisplayReact

Rating Display

A rating to read and not to set, such as the average of a product's reviews.

Rendered by React 19.3.1

import { RatingDisplay } from '@hamur/react/rating-display'

const stars = [1, 2, 3, 4, 5]

export default function RatingDisplayExample() {
  return (
    <div className="rating-summary">
      <RatingDisplay.Root className="rating" value={4.3}>
        {stars.map((star) => (
          <RatingDisplay.Item key={star} index={star} className="rating-item" />
        ))}
      </RatingDisplay.Root>
      <p className="muted">
        <span aria-hidden="true">4.3 · </span>128 reviews
      </p>
    </div>
  )
}

Not measured yetTests passing in React

Not measured yetSize

Not measured yetMemory

Not measured yetSpeed

[N] commits

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<RatingDisplay.Root>
  <RatingDisplay.Item />
</RatingDisplay.Root>

Examples

The demo at the top is the one example this component has so far.

API reference

5 props across 2 parts, in React syntax. className, style, render are listed once, under Shared props.

Item`RatingDisplay.Item`

One star of the display, presentational: its fill from the value, and --rating-item-fill. Renders a <span>.

Item props
Prop	Type	Default
`index`requiredThe star, from 1 to `max`.	`number`	`—`

Item data attributes
Data attribute	Description
`data-fill`	How much of the star the value fills.

Item CSS variables
CSS variable	Description
`--rating-item-fill`	How much of the star the value fills, from `0%` to `100%`.

Root`RatingDisplay.Root`

Shows any rating, such as an average, as an image named "Rated 4.3 out of 5". Not focusable and not part of a form. Renders a <div>.

Root props
Prop	Type	Default
`value`requiredThe rating to show: any number, clamped to 0..`max`.	`number`	`—`
`max`The number of stars.	`number`	`5`
`labels`The texts, in English by default.	`Partial<RatingDisplayLabels>`	`—`
`locale`The locale used by `Intl.NumberFormat` when formatting the numbers of the name.	`Intl.LocalesArgument`	`—`

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Rating Display takes no focus and has no keys of its own.

Accessibility

What the parts set
Part	Sets	So that
Root	`role="img"`, `aria-label` "Rated 4.3 out of 5" (`labels.root`), unless it has `aria-label` or `aria-labelledby`	the stars are read once, as the value they show, and not as five separate shapes
Item	no role of its own, inside the image	a screen reader does not stop on each star

Focus order

Rating Display is not focusable, and none of its stars is; focus passes over it.