Precision Modes in React Rating Component

29 Aug 20234 minutes to read

You can use the precision property of the rating component to provide ratings with varying levels of precision.

The precision types of Rating are as follows:

  • Full: The rating is increased in whole number increments. For example, if the current rating is 2, the next possible ratings are 3, 4, and so on.
  • Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 2.5, the next possible ratings are 3, 3.5, 4, and so on.
  • Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on.
  • Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.
// Import the Rating.
import { RatingComponent, PrecisionType } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <label>Full Precision</label><br />
            <RatingComponent id='rating1' value={3} precision={PrecisionType.Full}></RatingComponent><br />
            <label>Half Precision</label><br />
            <RatingComponent id='rating2' value={2.5} precision={PrecisionType.Half}></RatingComponent><br />
            <label>Quarter Precision</label><br />
            <RatingComponent id='rating3' value={3.75} precision={PrecisionType.Quarter}></RatingComponent><br />
            <label>Exact Precision</label><br />
            <RatingComponent id='rating4' value={2.3} precision={PrecisionType.Exact}></RatingComponent><br />
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent, PrecisionType } 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>Full Precision</label><br/>
            <RatingComponent id='rating1' value={3} precision= {PrecisionType.Full} ></RatingComponent><br/>
            <label>Half Precision</label><br/>
            <RatingComponent id='rating2' value={2.5} precision= {PrecisionType.Half} ></RatingComponent><br/>
            <label>Quarter Precision</label><br/>
            <RatingComponent id='rating3' value={3.75} precision= {PrecisionType.Quarter} ></RatingComponent><br/>
            <label>Exact Precision</label><br/>
            <RatingComponent id='rating4' value={2.3} precision= {PrecisionType.Exact} ></RatingComponent><br/>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));