Selection in React Rating Component

29 Aug 20237 minutes to read

The rating component allows users to rate something using a visual scale, and the selection state can be changed by the user clicking or tapping on the stars in the rating scale or through code. The rating component has a minimum value and a reset button, and provides customization options for the selected rating value and selection behavior.

index.jsx

// 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}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

// 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} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Min value

You can use the min property of the rating component to set the minimum possible rating value the user can select. If you set the min property to 2, then you will not be able to select a rating lower than 2.

index.jsx

// 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' min={2}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

// 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' min={2} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Single selection

You can use the enableSingleSelection property of the rating component to select only one item at a time. When the enableSingleSelection property is set to true, only the selected item will be considered to be in the selected state, while all other items will be unselected.

index.jsx

// 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} enableSingleSelection={true}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

// 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} enableSingleSelection={true} ></RatingComponent>
        </div>
    );
  }
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Show or hide reset button

You can reset the rating value to its default by using the allowReset property of the rating component. When the allowReset property is set to true, a reset button will be shown that allows the user to reset the rating value to its default.

index.jsx

// 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} allowReset={true}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

// 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} allowReset={true} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));