Rating

Interactive star rating input.

Usage

tsx

import { Rating } from "fromsrc/client"

const [value, setValue] = useState(0)

<Rating value={value} onChange={setValue} />

Display only, no interaction:

tsx

<Rating value={4} readonly />

Change maximum stars:

tsx

<Rating value={3} max={10} />

Fully controlled with state:

tsx

const [rating, setRating] = useState(3)

<Rating
  value={rating}
  onChange={(v) => setRating(v)}
/>

Works with form libraries:

tsx

<Rating value={formState.rating} onChange={(v) => setFormValue("rating", v)} />

prop	type	default	description
value	number	0	Current rating
max	number	5	Maximum stars
onChange	(value: number) => void	-	Change callback
readonly	boolean	false	Disable interaction

Interactive star rating input.

tsx

import { Rating } from "fromsrc/client"

const [value, setValue] = useState(0)

<Rating value={value} onChange={setValue} />

Display only, no interaction:

tsx

<Rating value={4} readonly />

Change maximum stars:

tsx

<Rating value={3} max={10} />

Fully controlled with state:

tsx

const [rating, setRating] = useState(3)

<Rating
  value={rating}
  onChange={(v) => setRating(v)}
/>

Works with form libraries:

tsx

<Rating value={formState.rating} onChange={(v) => setFormValue("rating", v)} />

prop	type	default	description
value	number	0	Current rating
max	number	5	Maximum stars
onChange	(value: number) => void	-	Change callback
readonly	boolean	false	Disable interaction