Labels in React Rating

03 Sep 20267 minutes to read

Display a label showing the current React Rating value by setting the showLabel property to true.

// 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

Position the label on any side of the React Rating using the labelPosition property.

The following label positions are supported:

  • Top: Label appears above the React Rating.
  • Bottom: Label appears below the React Rating.
  • Left: Label appears to the left of the React Rating.
  • Right: Label appears to the right of the React 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

Customize the label using the labelTemplate tag directive. The current rating value is passed as the value property in the template context, allowing you to display dynamic information about the React Rating.

// 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'));