Welcome to Star Rating Library

Examples

Example 1 (Message)

Example 2 (Loading)

Example 3 (Disabled)

Options

const options = {
  // How many stars has been chosen
  currentRating: 5,
  
  // Current color of stars. Hover color is automatically set Darker, for default value = #cc0000
  starsColor: '#ff0000',
  
  // Current color of text and border of infopanel. 
  textColor: '#848484', 
  
  // Current background color of infopanel
  infoPanelBackgroundColor: '#fff',
  
  // Disable stars widget for click events
  disabled: false,
  
  // Size of stars and text. Supports such as font-size
  size: "16px",
  
  // Change state of widget to loading (Show spin)
  loader: false,
  
  // Set up custom message in infopanel
  message: '',
}

Methods of instance

Method	Description	Arguments
changeRatingValue(value)	Change how many stars will check	1-5
disable()	Disable click events	-
enable()	Enable click events	-
changeColor(hex)	Change current color of widget. Hover color will set up automatic	hex value for example (#000)
changeSize(size)	Change current size of stars and text	Supports such as font-size
changeLoader(true)	Change state of widget to loading (Show spin) If was true it will set up to false and backward	default: null (automatic reverse), but you can use true, false
changeMessage(text)	Set up custom message in infopanel	Some text
changeTextColor(hex)	Change current text and border colors	hex value for example (#000)
changeInfoPanelBackgroundColor(hex)	Change current infopanel background`s color	hex value for example (#000)

Events

onChange(event)

// Default change event. U can modify it and add your own logic
instance.onChange = (event) => {
  if (!e?.target?.dataset?.value) {
    return;
  }

  this.changeRatingValue(e.target.dataset.value);
}