Precision Modes in React Rating

03 Sep 20264 minutes to read

Set the precision property to provide React Rating with varying levels of precision.

The React Rating component supports the following precision types:

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