Components
Rating
Unstable: a read-only score, five stars with the score and the review count written out, read as one sentence. Import it from @nizivo/react/unstable/rating.
Examples
Basic
A rating: the stars, the score and the count, read as one sentence.
import type { JSX } from 'react';
import { Rating } from '@nizivo/react/unstable/rating';
export function RatingExample(): JSX.Element {
return (
<div style={{ display: 'grid', gap: 12, justifyItems: 'start' }}>
<Rating value={4.8} count={1208} />
<Rating value={3} />
</div>
);
}
Import
import { Rating } from '@nizivo/react/unstable/rating';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/rating.css';Static or interactive
Server. No client JavaScript. How to choose.
Reading it
The stars are decoration: the whole is one image named in words, "Rated 4.8 out of 5 from 1,208
reviews". value is the score, max the scale (5), count the number of reviews, and locale
formats the numbers. A star fills for each whole point. It is not an input: to ask for a rating,
use a RadioGroup.
Props
Server component Renders data-slot="rating" with the class nz-rating. Props: RatingProps. Source: src/unstable/rating/rating.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
count | number | – | How many reviews it averages. |
labels | Partial<RatingLabels> | – | |
locale | string | 'en-US' | BCP 47 tag for the numbers. |
max | number | 5 | |
render | RenderProp<Record<string, never>> | – | Must render a |
valuerequired | number | – | The score, from 0 to |
- Also takes every attribute of
<span>exceptchildren,role. (Omit<ComponentPropsWithRef<"span">, "children" | "role">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
RatingLabelstypeimport type { RatingLabels } from '@nizivo/react/unstable/rating'Rating's own strings (§16.4): serialisable, English defaults.
Name Type Default Description countrequiredstring | PluralLabel'({count} reviews)'The visible count; a
PluralLabelpicks by the count.labelrequiredstring'Rated {value} out of {max}'The name without a count:
{value}and{max}.labelWithCountrequiredstring | PluralLabel'Rated {value} out of {max} from {count} reviews'The name with a count:
{value},{max}and{count}; aPluralLabelpicks by the count.RatingPropstypeimport type { RatingProps } from '@nizivo/react/unstable/rating'The props of
Rating, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
rating.nz-rating | Ratingroot (takes render) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-rating, .nz-rating-count, .nz-rating-star, .nz-rating-stars, .nz-rating-value.
Tokens this stylesheet reads (7)
--nz-border-strong, --nz-font-body-s, --nz-font-label-m-strong, --nz-icon-warning, --nz-space-2, --nz-text-primary, --nz-text-secondary
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
RankedList
Top products, channels or regions as an ordered list, each row a label, its value and a bar relative to the leader. The bars are decorative; the values are printed.
ResponseBlock
Unstable: one AI answer from the first wait to its end, thinking, streaming with a Stop button, complete with its actions, or an error with a retry. Import it from @nizivo/react/unstable/response-block.