Belle’s rating component

Use in your code Learn more
bit import belle.react-components/components/rating

Belle’s rating component

The component leverages 5 characters (by default stars) to allow the user to rate.

In addition to the props listed below, you can also use tabIndex, style, className, focusStyle, onMouseDown, onMouseUp, onMouseEnter, onMouseMove, onMouseLeave, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onFocus, onBlur, onClick, onKeyDown

 

More info

See live examples. For extended info, go to Belle documentation.

 

Standard example

<Rating defaultValue={3}></Rating>

 

Disabled Rating

<Rating defaultValue={4} disabled></Rating>

 

Rating with a custom character

<Rating defaultValue={4} character={'✪'}></Rating>

 

Controlled Rating Component with a Reset Link

Reset rating functionality can be implemented using controlled rating component like this:

<Rating valueLink={ this.linkState('customRatingValue') } />

<a onClick={ this._resetRating }
 style={{
   marginLeft: 20,
   position: 'relative',
   top: -5,
   textDecoration: 'underline',
   cursor: 'pointer'
  }}>Reset</a>

_resetRating() {
this.setState({
  customRatingValue: undefined
});
}

Properties

NameTypeDescription
wrapperPropsObject

(optional) This object allows to provide any kind of valid properties for a div tag. It allows to extend the div wrapping the whole rating component.

characterPropsObject

(optional) The property can be used to specify any other properties specific to rating character apart from styling. They will be applied to the span wrapping the character.

defaultValue

(optional) Behaves like the defaultValue poperty of a native input-tag. The rating can be manipulated through the user interface.

value

(optional) Behaves like the value poperty of a native input-tag. The rating can not be manipulated through the user interface.

valueLinkValueReference

(optional) Behaves like the valueLink poperty of a native input-tag. ValueLink allows to enable two-way data binding between a state property and the value in the user interface.

disabledBoolean

(optional) Can be used to disable rating component.

characterCharacter

(optional. default: ‘★’) Rating character used in the component.

preventFocusStyleForTouchAndClickBoolean

(optional. default: true) Prevents the focus style being applied in case the buttons becomes focused by a click or touch.

focusStyleObject

(optional) The property is used to apply a focus style directly to the wrapper. Works like React’s built-in style property except that it extends the properties from the base style.

disabledStyleObject

(optional) The property is used to apply a style directly to the wrapper applied when the component is disabled. Works like React’s built-in style property except that it extends the properties from the base style.

hoverStyleObject

(optional) The property is used to apply a style directly to the wrapper applied when the component is hovered. Works like React’s built-in style property except that it extends the properties from the base style.

disabledHoverStyleObject

(optional) The property is used to apply a style directly to the wrapper applied when the component is disabled and is hovered. Works like React’s built-in style property except that it extends the properties from the base style.

characterStyleObject

(optional) The property can be used to specify styling of set rating values and will be applied to the spans wrapping the characters. Behaves like React’s built-in style property.

activeCharacterStyleObject

(optional) The property can be used to specify styling of set rating values when a user touches or presses the rating. These styles will be applied to the spans wrapping the characters. Works like React’s built-in style property except that it extends the properties from the base characterStyle.

hoverCharacterStyleObject

(optional) The property can be used to specify styling of set rating values when a user hover them. These styles will be applied to the spans wrapping the characters. Works like React’s built-in style property except that it extends the properties from the base characterStyle.

onUpdateFunction

(optional) Callback executed when a user changes the rating via the user interface. onUpdate has one argument which is an object containing the value e.g. { value: 3 }.

Test Summary

Rating should be able to provide a valueLinkTests didn't run
Rating should be able to provide a valueTests didn't run
Rating should be able to provide a defaultValueTests didn't run
Rating should to not provide any kind of valueTests didn't run
Rating should not be able to change value via the user interface if a value property is definedTests didn't run
Rating update the internal value should be possible by updating the value propertyTests didn't run
Rating update the internal value should be possible by updating the valueLink propertyTests didn't run
Rating update the internal value should not be possible by updating the defaultValue propertyTests didn't run