Star rating

Examples

Display a rating

Provide a value with the rating. Values are rounded down to the nearest half.

This is rated
This is rated 3
This is rated 3.4
This is rated 3.5
This is rated 3.9
This is rated 4
import StarRating from '@pluralsight/ps-design-system-starrating'
import React from 'react'
function Example() {
return (
<>
<StarRating />
<StarRating value={3} />
<StarRating value={3.4} />
<StarRating value={3.5} />
<StarRating value={3.9} />
<StarRating value={4} />
</>
)
}
export default Example

Interactive

Add the onChange prop with function to make the rating interactive.

This is rated
This is rated 2.5
import StarRating from '@pluralsight/ps-design-system-starrating'
import React from 'react'
function Example() {
return (
<>
<StarRating
value={null}
onChange={val => alert('The new value is: ' + val)}
/>
<StarRating
value={2.5}
onChange={val => alert('The new value is: ' + val)}
/>
</>
)
}
export default Example

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-starrating
  • Import
    import StarRating from '@pluralsight/ps-design-system-starrating'
Name
Type
Description
Default
onChange
(number, Event) => ()
triggered when the value changes
null
value
number
current value as a float