How can I help you?
Templates in React Rating Component
21 Feb 202624 minutes to read
Customize the appearance of rating items using templates. Templates allow you to specify a custom layout for rating items with any content, creating a personalized rating experience.
The Rating component supports the following templates for item customization:
Empty (unrated) symbol template
Customize unrated items using the emptyTemplate tag directive. The value and index are available in the template context for accessing unrated item information.
If fullTemplate is not defined, emptyTemplate is used for both rated and unrated items. Apply custom styles to differentiate between rated and unrated states.
// 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() {
function emptyTemplate() {
return (<React.Fragment><span className='custom-font sf-rating-heart'></span></React.Fragment>);
}
return (<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate}></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() {
function emptyTemplate(){
return(
<React.Fragment><span className='custom-font sf-rating-heart'></span></React.Fragment>
);
}
return (
<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate} ></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 {
/* To add the background color for the font icon. */
background: linear-gradient(to right, rgb(254,87,133,255) var(--rating-value), transparent var(--rating-value));
/* To clip the background to the icon (text) alone. */
background-clip: text;
-webkit-background-clip: text;
/* To make the background color visible instead of font color. */
-webkit-text-fill-color: transparent;
/* To provide a border for font icon. */
-webkit-text-stroke: 1px rgb(254,87,133,255);
}
/* Represents the styles for icon */
@font-face {
font-family: 'rating';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-rating-"], [class*=" sf-rating-"] {
font-family: 'rating' !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;
}
.sf-rating-heart:before {
content: "\e702";
}The current value of the rating item available in the template context as
valueand in the rating item element as CSS Variable (--rating-value) can be used to support precision in templates.
Full (rated) symbol template
Customize rated items using the fullTemplate tag directive. This allows you to specify a custom layout for rated items with any content you desire.
The value and index are available in the template context for accessing rated item information.
// 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() {
function emptyTemplate() {
return (<React.Fragment><span className='custom-font sf-icon-empty-star'></span></React.Fragment>);
}
function fullTemplate() {
return (<React.Fragment><span className='custom-font sf-icon-fill-star'></span></React.Fragment>);
}
return (<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate}></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() {
function emptyTemplate(){
return(
<React.Fragment><span className='custom-font sf-icon-empty-star'></span></React.Fragment>
);
}
function fullTemplate(){
return(
<React.Fragment><span className='custom-font sf-icon-fill-star'></span></React.Fragment>
);
}
return (
<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate} ></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 {
/* To change the icon font color. */
color: rgb(255, 215, 0);
}
/* Represents the styles for icon */
@font-face {
font-family: 'rating-template';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfMAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlm+icDjQAAAcwAAAE0aGVhZCK49ucAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQAcAJoAAAHEAAAACG1heHABDwBkAAABCAAAACBuYW1lmYExxgAAAwAAAAKFcG9zdCH169QAAAWIAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAgPX4jF8PPPUACwQAAAAAAN/TWPsAAAAA39NY+wAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAADAFgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAABwAmgABAAAAAAP0A/QACQAAAQUTAyUFAxMlAwFn/qX6OwE1ATU7+v6lmQKsNf7//pasrAFqAQE1AUgAAAIAAAAAA/QD5AAdAFcAAAEfBAUPAxUTLwEjDwETNS8DJT8EJwMFDwQVHwIDBx8EMzclBRczPwU1Az8CNS8DJQMvBisBDwUCYAICBgMHASCwBAMCGuoHCAjpGgIDBLEBHgcGBgJiHXb+uQgHBgQBAgTUHgECBAUHCAkIAQ4BDgcJBAQEBwQDHdMEAgMFBgf+tHYDAgMEBAQEBQUEBAQEAwICnwMDBgIDNbAGBgYE/uCBAgKBAR0HBgYGsDQCBAYD3Fr+9jwDBAcHBQgIB9T+twUIBwcEAwKVlQIBAgIFBwgJAUnUBwgJCAcFBD0BCgQDBAICAgEBAgICBAMAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEADwABAAEAAAAAAAIABwAQAAEAAAAAAAMADwAXAAEAAAAAAAQADwAmAAEAAAAAAAUACwA1AAEAAAAAAAYADwBAAAEAAAAAAAoALABPAAEAAAAAAAsAEgB7AAMAAQQJAAAAAgCNAAMAAQQJAAEAHgCPAAMAAQQJAAIADgCtAAMAAQQJAAMAHgC7AAMAAQQJAAQAHgDZAAMAAQQJAAUAFgD3AAMAAQQJAAYAHgENAAMAAQQJAAoAWAErAAMAAQQJAAsAJAGDIHJhdGluZy10ZW1wbGF0ZVJlZ3VsYXJyYXRpbmctdGVtcGxhdGVyYXRpbmctdGVtcGxhdGVWZXJzaW9uIDEuMHJhdGluZy10ZW1wbGF0ZUZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAJZmlsbC1zdGFyCmVtcHR5LXN0YXIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"],
[class*=" sf-icon-"] {
font-family: 'rating-template' !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;
}
.sf-icon-fill-star:before {
content: "\e700";
}
.sf-icon-empty-star:before {
content: "\e701";
}Using Emoji icon as rating symbol
Use emojis as rating symbols by specifying them as template content within the emptyTemplate tag directive.
// 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() {
function emptyTemplate(props) {
if (props.index === 0) {
return (<span className='angry emoji'>😡</span>);
}
else if (props.index === 1) {
return (<span className='disagree emoji'>🙁</span>);
}
else if (props.index === 2) {
return (<span className='neutral emoji'>😐</span>);
}
else if (props.index === 3) {
return (<span className='agree emoji'>🙂</span>);
}
else {
return (<span className='happy emoji'>😀</span>);
}
}
return (<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate} enableSingleSelection={true} enableAnimation={false}></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() {
function emptyTemplate(props: any) {
if(props.index===0){
return (<span className='angry emoji'>😡</span>); }
else if(props.index===1){
return (<span className='disagree emoji'>🙁</span>); }
else if(props.index===2){
return (<span className='neutral emoji'>😐</span>); }
else if(props.index===3){
return (<span className='agree emoji'>🙂</span>); }
else {
return (<span className='happy emoji'>😀</span>); }
}
return (
<div className='wrap'>
<RatingComponent id='rating' value={3} emptyTemplate={emptyTemplate} enableSingleSelection={true} enableAnimation={false} ></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;
}
/* To change the color of an unselected rating item. */
.e-rating-item-container:not(.e-rating-selected) .emoji {
filter: grayscale(1);
}Using SVG icon as rating symbol
Use SVG icons as rating symbols by specifying them as template content within the emptyTemplate and fullTemplate tag directives.
// 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() {
function emptyTemplate() {
return (<svg width="35" height="25" className="e-rating-svg-icon">
<rect width="35" height="25" fill="transparent" strokeWidth="2" stroke="rgb(173,181,189)"/>
</svg>);
}
function fullTemplate(props) {
return (<svg width="35" height="25" className="e-rating-svg-icon">
<defs>
<linearGradient id={`grad${props.index}`} x1="0%" y1="0%" x2="100%" y2="0%">
<stop className="start" offset="0%"/>
<stop className="end" offset="100%"/>
</linearGradient>
</defs>
<rect width="35" height="25" fill={`url(#grad${props.index})`} strokeWidth="2" stroke="rgb(173,181,189)"/>
</svg>);
}
return (<div className='wrap'>
<RatingComponent id='rating' value={4} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate} enableAnimation={false}></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() {
function emptyTemplate() {
return (
<svg width="35" height="25" className="e-rating-svg-icon">
<rect width="35" height="25" fill="transparent" strokeWidth="2" stroke="rgb(173,181,189)"/>
</svg>
);
}
function fullTemplate(props: any) {
return (
<svg width="35" height="25" className="e-rating-svg-icon">
<defs>
<linearGradient id={`grad${props.index}`} x1="0%" y1="0%" x2="100%" y2="0%">
<stop className="start" offset="0%" />
<stop className="end" offset="100%" />
</linearGradient>
</defs>
<rect width="35" height="25" fill={`url(#grad${props.index})`} strokeWidth="2" stroke="rgb(173,181,189)"/>
</svg>
);
}
return (
<div className='wrap'>
<RatingComponent id='rating' value={4} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate} enableAnimation={false} ></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;
}
/* To change the size between items */
.e-rating-container .e-rating-item-container {
padding: 0px;
}
/* To set the gradient color */
.e-rating-svg-icon #grad0 .start {
stop-color: #FF0000;
}
.e-rating-svg-icon #grad0 .end,
.e-rating-svg-icon #grad1 .start {
stop-color: #ff5101;
}
.e-rating-svg-icon #grad1 .end,
.e-rating-svg-icon #grad2 .start {
stop-color: #ffc801;
}
.e-rating-svg-icon #grad2 .end,
.e-rating-svg-icon #grad3 .start {
stop-color: #dbe300;
}
.e-rating-svg-icon #grad3 .end,
.e-rating-svg-icon #grad4 .start {
stop-color: #8bc301;
}
.e-rating-svg-icon #grad4 .end {
stop-color: #4eaa01;
}Using PNG image as rating symbol
Use PNG images as rating symbols by specifying them as template content within the emptyTemplate and fullTemplate tag directives.
// 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() {
function emptyTemplate() {
return (<img src="https://ej2.syncfusion.com/documentation/code-snippet/rating/png-templates-cs2/star-emptytemplate.png" width="25" height="25" />);
}
function fullTemplate() {
return (<img src="https://ej2.syncfusion.com/documentation/code-snippet/rating/png-templates-cs2/star-fulltemplate.png" width="25" height="25" />);
}
return (<div className='wrap'>
<RatingComponent id='rating' value={4} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate}>
</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() {
function emptyTemplate(){
return(
<img src="https://ej2.syncfusion.com/documentation/code-snippet/rating/png-templates-cs2/star-emptytemplate.png" width="25" height="25" />
);
}
function fullTemplate(){
return(
<img src="https://ej2.syncfusion.com/documentation/code-snippet/rating/png-templates-cs2/star-fulltemplate.png" width="25" height="25" />
);
}
return (
<div className='wrap'>
<RatingComponent id='rating' value={4} emptyTemplate={emptyTemplate} fullTemplate={fullTemplate} >
</RatingComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));