CoreUI PRO Component
To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
Alpha release
This component is in the Alpha phase and has an experimental API, which can be changed in the final release. If you want to use this component, please install @coreui/coreui-pro v5.1.0-alpha.0 and @coreui/react-pro v5.1.0-alpha.0
React Rating Component
A React star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.
How to use React Rating Component.#
Embed the Rating component in your React application like this:
<CRating value={3} />
Allow clear#
Enable users to clear their selected rating by clicking on the current rating again. This functionality is activated by setting allowClear
boolean property.
<CRating allowClear value={3} />
This allows the selected rating to be deselected, effectively resetting the rating to a state where no value is selected.
Read only#
Set the React rating component to read-only by adding readOnly
property. This disables interaction, preventing users from changing the displayed rating value.
<CRating readOnly value={3} />
Disabled#
Add the disabled
boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.
<CRating disabled value={3} />
Tooltips#
Enable descriptive text on hover by adding tooltips
prop. This provides immediate feedback or guidance as the user interacts with the rating items.
<CRating tooltips value={3} />
For custom messages, provide an array of labels corresponding to each rating value to enhance the user's understanding of each rating level.
<CRating tooltips={['Very bad', 'Bad', 'Meh', 'Good', 'Very good']} value={3} />
Sizes#
Larger or smaller react rating component? Add size="lg"
or size="sm"
for additional sizes.
<CRating size="sm" value={3} /><CRating value={3} /><CRating size="lg" value={3} />
Precision#
Adjust the granularity of the Rating component by setting precision
prop. This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback.
<CRating precision={0.25} value={3} />
Number of items#
Control the total number of rating items displayed by using max
property. You can create a React rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.
<CRating max={20} value={5} />
<CRating max={3} value={1} />
Custom icons#
Customize the React rating component with your choice of SVG icons by assigning new values to the activeIcon
and icon
properties in the JavaScript options. This allows for a unique look tailored to the design language of your site or application.
The Rating component can be customized with either SVG or font icons, allowing for visual alignment with your application's design. You can specify different icons for each rating value to enhance user interaction.
In the example below, we demonstrate how to set custom icons using SVG, allowing for detailed customization of the visual elements within the Rating component.
<CRating activeIcon={<CIcon icon={cisStar} customClassName=" " />} icon={<CIcon icon={cilStar} customClassName=" " />} value={3}/>
In the example below, we use font icons from the CoreUI Icons set. In the activeIcon
configuration, we also apply the utility class text-danger
to change the icon's color to red when it is active.
<CRating activeIcon={<CIcon icon={cilHeart} customClassName="text-danger" />} icon={<CIcon icon={cilHeart} customClassName=" " />} value={3}/>
For a more dynamic experience, define different icons for each rating value, enhancing the visual feedback:
const icons = { 1: <CIcon icon={cilMoodVeryBad} customClassName=" " />, 2: <CIcon icon={cilMoodBad} customClassName=" " />, 3: <CIcon icon={cilMeh} customClassName=" " />, 4: <CIcon icon={cilMoodGood} customClassName=" " />, 5: <CIcon icon={cilMoodVeryGood} customClassName=" " />,}
const activeIcons = { 1: <CIcon icon={cilMoodVeryBad} customClassName="text-danger-emphasis" />, 2: <CIcon icon={cilMoodBad} customClassName="text-danger" />, 3: <CIcon icon={cilMeh} customClassName="text-warning" />, 4: <CIcon icon={cilMoodGood} customClassName="text-success" />, 5: <CIcon icon={cilMoodVeryGood} customClassName="text-success-emphasis" />,}
return ( <CRating activeIcon={activeIcons} highlightOnlySelected icon={icons} tooltips={['Very bad', 'Bad', 'Meh', 'Good', 'Very good']} value={3} />)
Customizing#
CSS variables#
React ratings use local CSS variables on .rating
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-rating-gap: #{$rating-gap};--cui-rating-transition: #{$rating-transition};--cui-rating-item-height: #{$rating-item-height};--cui-rating-item-color: #{$rating-item-color};--cui-rating-item-scale-transform: #{$rating-item-scale-transform};--cui-rating-item-active-color: #{$rating-item-active-color};--cui-rating-item-icon: #{escape-svg($rating-item-icon)};
How to use CSS variables#
const vars = { '--my-css-var': 10, '--my-another-css-var': 'red',}return <CRating style={vars}>...</CRating>
SASS variables#
$rating-gap: .0625rem !default;$rating-transition: color .15s ease-out, transform .15s ease-out !default;$rating-item-height-sm: 1rem !default;$rating-item-height: 1.25rem !default;$rating-item-height-lg: 1.5rem !default;$rating-item-color: var(--cui-tertiary-color) !default;$rating-item-scale-transform: scale(1.2) !default;$rating-item-active-color: var(--cui-warning) !default;$rating-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M470.935,194.043,333.8,171.757,270.227,48.22a16,16,0,0,0-28.454,0L178.2,171.757,41.065,194.043A16,16,0,0,0,32.273,221.1l97.845,98.636L108.936,457.051a16,16,0,0,0,23.02,16.724L256,411.2l124.044,62.576a16,16,0,0,0,23.02-16.724L381.882,319.74,479.727,221.1A16,16,0,0,0,470.935,194.043Z'%3E%3C/path%3E%3C/svg%3E") !default;
API#
CRating#
import { CRating } from '@coreui/react-pro'// orimport CRating from '@coreui/react-pro/src/components/rating/CRating'
Property | Description | Type | Default |
---|---|---|---|
activeIcon | The default icon to display when the item is selected. | string | Element | Icon | - |
allowClear | Enables the clearing upon clicking the selected item again. | boolean | - |
className | A string of all className you want applied to the component. | string | - |
disabled | Toggle the disabled state for the component. | boolean | - |
highlightOnlySelected | If enabled, only the currently selected icon will be visibly highlighted. | boolean | - |
icon | The default icon to display when the item is not selected. | string | Element | Icon | - |
max | The maximum value the user can select. | number | 5 |
name | The name attribute of the radio input elements. | string | - |
onChange | Execute a function when a user changes the selected element. | (value: number) => void | - |
onHover | Execute a function when a user hover the element. | (value: number) => void | - |
precision | Minimum increment value change allowed. | number | 1 |
readOnly | Toggle the readonly state for the component. | boolean | - |
size | Size the component small, large, or custom if you define custom icons with custom height. | 'sm' | 'lg' | 'custom' | - |
tooltips | Enable tooltips with default values or set specific labels for each icon. | boolean | string[] | - |
value | The value attribute of component. | number | - |