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 changes	`null`
`value`	`number`	current value as a float