Search results

RatingComponent

Represents the React Rating Component

<RatingComponent value={value}></RatingComponent>

Properties

allowReset

boolean

Defines whether to show or hide the reset button in a rating component. When set to “true”, the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' allowReset={true} value={3.0}></RatingComponent>
    );
  }
}

Defaults to false

cssClass

string

Defines one or more CSS classes that can be used to customize the appearance of a rating component. One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects.

Defaults to

disabled

boolean

Defines whether a rating component is enabled or disabled. A disabled rating component may have a different visual appearance than an enabled one. When set to “true”, the rating component will be disabled, and the user will not be able to interact with it.

Defaults to false

emptyTemplate

string | function | JSX.Element

Defines the template that defines the appearance of each un-rated item in a rating component.

Defaults to

enableAnimation

boolean

Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered. When set to “true”, an animation will be added when the user hovers their cursor over an item in the rating component.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSingleSelection

boolean

Defines whether to select all the items before the selected item should be in selected state in a rating component. When set to “true”, only the selected item will be in the selected state, and all other items will be un-selected. When set to “false”, all items before the selected one will be in the selected state.

Defaults to false

fullTemplate

string | function | JSX.Element

Defines the template that defines the appearance of each rated item in a rating component.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' emptyTemplate="<span class='e-icons e-close'></span>" fullTemplate="<span class='e-icons e-check'></span>" enableAnimation= {false} value={3.0}></RatingComponent>
    );
  }
}

Defaults to

itemsCount

number

Defines the specific number of items (symbols) in rating component. The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating value.

Defaults to 5

labelPosition

string | LabelPosition

Defines the position of the label in rating component. The possible values are:

  • Top
  • Bottom
  • Left
  • Right
import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' value={3.0} showLabel={true} labelPosition='Top'></RatingComponent>
    );
  }
}

Defaults to LabelPosition.Right

labelTemplate

string | function | JSX.Element

Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' value={3.0} showLabel={true} labelTemplate="<span>${value} out of 5</span>"></RatingComponent>
    );
  }
}

Defaults to

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

min

number

Defines the value that specifies minimum rating that a user can select. The value is set to 0, which means that the minimum possible rating is 0.

Defaults to 0.0

precision

string | PrecisionType

Defines the precision type of the rating which used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision. The possible values are:

  • Full
  • Half
  • Quarter
  • Exact
import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' precision='Half' value={2.5}></RatingComponent>
    );
  }
}

Defaults to PrecisionType.Full

readOnly

boolean

Defines a boolean value that specifies whether the read-only mode is enabled for a rating component, which prevents the user from modifying or interacting with the rating value but allows them to read it.

Defaults to false

showLabel

boolean

Defines a value that specifies whether to display a label that shows the current value of a rating. When set to “true”, a label will be displayed that shows the current value of the rating; otherwise false.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' value={3.0} showLabel={true}></RatingComponent>
    );
  }
}

Defaults to false

showTooltip

boolean

Defines a value that defines whether to show tooltip for the items. When set to “true”, show tooltip for the items.

Defaults to true

tooltipTemplate

string | function | JSX.Element

Defines the template that used as tooltip content over default tooltip content of the rating. The current value of rating passed as context to build the content.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' tooltipTemplate="<span>${value} Star</span>" value={3.0}></RatingComponent>
    );
  }
}

Defaults to

value

number

Defines the current rating value which used to display and update the rating selected by the user. Based on “PrecisionType”, users can select ratings with varying levels of precision. The “value” is a decimal value that ranges from the minimum value to the items count, as specified by the “min” and “itemsCount” properties of the rating.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <RatingComponent id='rating' value={3.0}></RatingComponent>
    );
  }
}

Defaults to 0.0

visible

boolean

Defines a value that indicates whether the rating component is visible or hidden. When set to “true”, if the rating component is visible.

Defaults to true

Methods

destroy

Destroys the Rating instance.

Returns void

reset

Reset’s the value to minimum.

import * as React from 'react';
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}>  {
    private ratingRef: React.RefObject<RatingComponent> = React.createRef();
    onClick() {
        this.ratingRef.current?.reset();
    }
    render() {
        return (
          <div className='control-pane'>
                <RatingComponent id='rating' min={1.0} value={3.0} ref={this.ratingRef}/> 
                <button onClick={this.onClick.bind(this)} >Reset</button>
          </div> 
        );
    }
}

Returns void

Events

beforeItemRender

EmitType<RatingItemEventArgs>

Event callback that is raised before rendering each item.

import * as React from 'react';
import { RatingComponent,RatingItemEventArgs } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}>  {
  private beforeItemRender(args:RatingItemEventArgs): void {
    //Your required action here
  }
  render() {
    return (
      <RatingComponent id='rating' value={3.0} beforeItemRender={this.beforeItemRender}/> 
    );
  }
}

created

EmitType<Event>

Event callback that is raised after rendering the rating.

onItemHover

EmitType<RatingHoverEventArgs>

Event callback that is raised when a user hovers over an item.

import * as React from 'react';
import { RatingComponent,RatingHoverEventArgs } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  private onItemHover(args:RatingHoverEventArgs): void {
    //Your required action here
  }
  render() {
    return (
      <RatingComponent id='rating' value={3.0} onItemHover={this.onItemHover}/> 
    );
  }
}

valueChanged

EmitType<RatingChangedEventArgs>

Event callback that is raised when the value is changed.

import * as React from 'react';
import { RatingComponent,RatingChangedEventArgs } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
    private valueChanged(args:RatingChangedEventArgs): void {
        alert("Previous Value:"+args.previousValue+"\nValue:"+args.value);
    }
    render() {
        return (
            <RatingComponent id='rating' value={3.0} valueChanged={this.valueChanged}/> 
        );
    }
}