Syncfusion AI Assistant

How can I help you?

Appearance in React Rating Component

21 Feb 202620 minutes to read

You can also customize the appearance of rating component.

Items Count

You can specify the number of rating items using the itemsCount property.

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

Disabled

Disable the rating component by setting the disabled property to true. When disabled, the rating component prevents user interaction and may display a different visual appearance than an enabled component.

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

Visible

Use the visible property to control the visibility of the rating component. When set to true, the component is visible on the page. When set to false, the component is hidden.

// 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() {
    var rating;
    function visible() {
        rating.visible = !rating.visible;
    }
    return (<div className='wrap'>
          <button id="btn" onClick={visible}>Visible</button>
          <RatingComponent id='rating' value={3} visible={true} ref={(scope) => { rating = scope; }}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent, Rating } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
    var rating: Rating;

    function visible() {
        rating.visible = !rating.visible;
    }
  
    return (
        <div className='wrap'>
            <button id="btn" onClick={ visible }>Visible</button>
            <RatingComponent id='rating' value={3} visible={true} ref={(scope) => { rating = scope; }} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Read only

You can use the readOnly property of the rating component to make the component non-interactive and prevent the user from changing the rating value.

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

CssClass

You can customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the cssClass property.

Changing rating symbol border color

Change the rating icon border color by using the cssClass property and setting the text-stroke CSS property of .e-rating-icon to your desired color.

// 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} cssClass='custom-border'></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} cssClass='custom-border' ></RatingComponent>
        </div>
    );
}   
export default App;
ReactDom.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 50px auto;
    text-align: center;
}

.e-rating-container.custom-border .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-border .e-rating-item-container .e-rating-icon {
    /* To change rating symbol border color */
    -webkit-text-stroke: 2px #ae9e9d;
}

Changing rated/un-rated symbol fill color

You can customize the fill colors of rated and un-rated icons in the rating component using the cssClass property and the linear-gradient color-stops in the background CSS property of .e-rating-icon. The first color-stop defines the rated fill color and the second defines the un-rated fill color.

// 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} cssClass='custom-fill'></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} cssClass='custom-fill' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 50px auto;
    text-align: center;
}

.e-rating-container.custom-fill .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-fill .e-rating-item-container .e-rating-icon {
    /* To change rated symbol fill color and un-rated symbol fill color */
    background: linear-gradient(to right, #ffe814 var(--rating-value), #d8d7d4 var(--rating-value));
    background-clip: text;
    -webkit-background-clip: text;
}

This will customize the rated fill color to #ffe814 and un-rated fill color to #d8d7d4. --rating-value in the linear-gradient provides the current value of the rating item.

Changing the item spacing

Change the spacing between rating items by using the cssClass property and setting the margin/padding CSS property of .e-rating-item-container to your desired size.

// 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} cssClass='custom-font'></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} cssClass='custom-font' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 50px auto;
    text-align: center;
}

.e-rating-container.custom-font .e-rating-item-container {
  /* To change the size between items */
  margin: 0px 7px;
}

Changing icon using CssClass

Change the rating item icon by using the cssClass property and setting the content CSS property of .e-icons.e-star-filled:before to your desired font icon.

// 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} cssClass='custom-icon'></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} cssClass='custom-icon' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 50px auto;
    text-align: center;
}

/* Represents the styles for icon */
@font-face {
  font-family: 'custom-icon';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vSfQAAAEoAAAAVmNtYXDnEudXAAABiAAAADZnbHlmVIZrowAAAcgAAAEYaGVhZCK6KOUAAADQAAAANmhoZWEIUAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCMAAAAAAHAAAAABm1heHABDQCJAAABCAAAACBuYW1lv3dY+QAAAuAAAAJVcG9zdN12YnkAAAU4AAAALwABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAEGWKhV8PPPUACwQAAAAAAN/UcgcAAAAA39RyBwAAAAAD8wPaAAAACAACAAAAAAAAAAEAAAACAH0AAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLnAgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wL//wAA5wL//wAAAAEABAAAAAEAAAAAAAAAjAAAAAEAAAAAA/MD2gB8AAATDxYVHw8/DjUvHiMPDC8PDwaoDAwMCwoKCgkICAgHBgYFBQQEAwICAQEBAQIDAwQFBQsVIyE5UmWI7FM5IR0WDQgFBAMDAgEBAQECAgMEBAUFBgYHCAgICQoKCgsMDAwMDAwNDAwNDBkYGBgXFRUUEhEICAYHCQsLDA0ODg8QEBARERESEQ4ODg4ODg0DwgYHBwgICQkKCgoLCwwLDA0MDQwNDQ4NDQ4NDQ4NDQ0NFSIwK0Rfbo/9XkUrJyMWFA0NDQ4NDQ4NDQ0ODA0NDA0LDAwLCgsKCgkICQgHBwYFBQQDAwIBAQIFBgkLDg8REwoKCwwRDw8NDQsLCggIBgUEAwIBAQECAgQEBQAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAsAAQABAAAAAAACAAcADAABAAAAAAADAAsAEwABAAAAAAAEAAsAHgABAAAAAAAFAAsAKQABAAAAAAAGAAsANAABAAAAAAAKACwAPwABAAAAAAALABIAawADAAEECQAAAAIAfQADAAEECQABABYAfwADAAEECQACAA4AlQADAAEECQADABYAowADAAEECQAEABYAuQADAAEECQAFABYAzwADAAEECQAGABYA5QADAAEECQAKAFgA+wADAAEECQALACQBUyBjdXN0b20taWNvblJlZ3VsYXJjdXN0b20taWNvbmN1c3RvbS1pY29uVmVyc2lvbiAxLjBjdXN0b20taWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAYwB1AHMAdABvAG0ALQBpAGMAbwBuAGMAdQBzAHQAbwBtAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAVoZWFydAAAAA==) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.custom-icon .e-icons.e-star-filled {
  font-family: 'custom-icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.custom-icon .e-icons.e-star-filled:before {
  content: "\e702";
}