Star rating

Star rating is used to display or enter a content rating.

  • Install
    npm install @pluralsight/ps-design-system-starrating
  • Import
    import StarRating from '@pluralsight/ps-design-system-starrating'

Examples

Display a rating

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

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.

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

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

Props

Name
Type
Description
Default
onChange (number, Event) => ()triggered when the value changesnull
valuenumbercurrent value as a float