React Rating Overview

The Ignite UI for React Rating component allows users to view and provide feedback.

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

Before using the IgrRating, you need to register it as follows:

import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

The simplest way to start using the IgrRating is as follows:

  <IgrRating></IgrRating>

This will create a five-star rating component that can be used to input and read data from.

Using Custom Symbols

The IgrRating component allows you to use custom symbols in place of the default star symbols. If you want to use a different symbol, like SVG, icon or another unicode symbol, you should place IgrRatingSymbol components between the opening and closing brackets of the IgrRating:

  <IgrRating className="size-large" label="Rate Experience" step={.5} hoverPreview={true}>
    <IgrRatingSymbol>
        <IgrIcon name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
        <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
      <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
</IgrRating>

The number of rating symbols between the opening and closing brackets of the rating component determines the max value.

Single Selection

The Ignite UI for React Rating component has a single selection mode that allows users to provide different icons/elements for the different rating values. In this case, only one of the icons/elements can be selected and reflect the feedback given by the user.

<IgrRating single={true}>
  <IgrRatingSymbol>
      <span>😣</span>
      <span slot="empty">😣</span>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <span>😣</span>
      <span slot="empty">😣</span>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <span>😣</span>
      <span slot="empty">😣</span>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <span>😣</span>
      <span slot="empty">😣</span>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
      <span>😣</span>
      <span slot="empty">😣</span>
  </IgrRatingSymbol>
</IgrRating>

Keep in mind that the step attribute doesn’t work with single selection mode.

Empty & Selected

The Ignite UI for React Rating component allows users to use different icons or elements for the ‘selected’ and ‘empty’ states of each rating symbol. It is mandatory to provide two icons for each symbol, even if they are the same. One is used for the ‘selected’ state, which is defined by not specifying any slot, and the other is used for the ‘empty’ state, which you can define using the empty slot. For instance:

<IgrRatingSymbol>
    <IgrIcon name='bandage' collection="material"></IgrIcon>
    <IgrIcon name='bacteria' collection="material" slot='empty'></IgrIcon>
</IgrRatingSymbol>

As shown above, the best practice is to use icons for the rating symbols. We recommend using an igc-icon component for the ‘empty’ and ‘selected’ icons. However, if you prefer to use symbols or emojis instead of icons, we recommend using a <span> element for them, like so:

<IgrRating>
  <IgrRatingSymbol>
    <span>😣</span>
    <span slot="empty">😣</span>
  </IgrRatingSymbol>
  <IgrRatingSymbol>
    <span>😔</span>
    <span slot="empty">😔</span>
  </IgrRatingSymbol>
  ...
</IgrRating>

Configuration

Single

Turns on the Single visual mode for the rating. Useful when using symbols that communicate unique values, like feedback emoji faces.

Value

The Value attribute sets the current value of the component.

Label

The Label attribute allows setting the label value of the rating component.

Value Format

A format string which sets aria-valuetext. All instances of it will be replaced with the current value of the control. Important for screen-readers and useful for localization.

Max Value

The Max attribute sets the maximum allowed value of the rating component.

Step

The Step attribute sets the allowed fraction of steps between two symbols. Useful when splitting the rating symbols in halves.

Hover Preview

The hoverPreview attribute makes the component show the possible outcome of user selection on hover. It is useful when you want to give instant feedback about what the selected value could be.

Read-Only

The ReadOnly attribute allows the users to set the IgrRating in read-only mode. This attribute is useful when you want to use the component for information purposes only.

Disabled

The Disabled attribute disables the component, making it impossible to select a value using the mouse or keyboard.

Methods

Step Up

The StepUp method increments the value of the component by n steps. Determined by the step factor.

Step Down

The StepDown method decrements the value of the component by n steps. Determined by the step factor.

Events

The IgrRating component emits two separate events - hover and change.

Hover Event

The hover event is fired when hovering over a symbol. It provides the value of the symbol under the mouse cursor. Useful for creating custom value labels and readouts.

Change Event

The change event is fired when the selected value changes.

Styling

The IgrRating component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

igc-rating::part(full) {
  color: var(--ig-primary-500)
}

igc-rating::part(empty) {
  color: var(--ig-secondary-200);
}

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub