Labels in React Rating Component

29 Aug 20238 minutes to read

You can use the showLabel property to display a label that shows the current value of the rating. When the showLabel property is set to true, a label will be displayed.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <RatingComponent id='rating' value={3} showLabel={true}></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' value={3} showLabel= {true} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Label position

The rating component allows you to place the label on the top, bottom, left, or right side of the rating using the labelPosition property.

The following label positions are supported:

  • Top: The label is placed on the top of the rating.
  • Bottom: The label is placed on the bottom of the rating.
  • Left: The label is placed on the left side of the rating.
  • Right: The label is placed on the right side of the rating.
// Import the Rating.
import { RatingComponent, LabelPosition } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <label>Left Label Position</label><br />
            <RatingComponent id='rating1' value={3} showLabel={true} labelPosition={LabelPosition.Left}></RatingComponent><br />
            <label>Right Label Position</label><br />
            <RatingComponent id='rating2' value={3} showLabel={true} labelPosition={LabelPosition.Right}></RatingComponent><br />
            <label>Top Label Position</label><br />
            <RatingComponent id='rating3' value={3} showLabel={true} labelPosition={LabelPosition.Top}></RatingComponent><br />
            <label>Bottom Label Position</label><br />
            <RatingComponent id='rating4' value={3} showLabel={true} labelPosition={LabelPosition.Bottom}></RatingComponent><br />
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent, LabelPosition } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <label>Left Label Position</label><br/>
            <RatingComponent id='rating1' value={3} showLabel= {true} labelPosition= {LabelPosition.Left} ></RatingComponent><br/>
            <label>Right Label Position</label><br/>
            <RatingComponent id='rating2' value={3} showLabel= {true} labelPosition= {LabelPosition.Right}></RatingComponent><br/>
            <label>Top Label Position</label><br/>
            <RatingComponent id='rating3' value={3} showLabel= {true} labelPosition= {LabelPosition.Top} ></RatingComponent><br/>
            <label>Bottom Label Position</label><br/>
            <RatingComponent id='rating4' value={3} showLabel= {true} labelPosition= {LabelPosition.Bottom} ></RatingComponent><br/>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Label template

You can use the labelTemplate tag directive to specify a custom template for the Label of the rating. The current value of the rating will be passed as the value property in the template context when building the content of the label. This allows you to include dynamic information about the rating in the template.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <RatingComponent id='rating' showLabel={true} value={3} labelTemplate='<span>${value} out of 5</span>'></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' showLabel={true} value={3} labelTemplate='<span>${value} out of 5</span>' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));