.png)
3 years ago
113 BOOK THIS SPACE FOR AD
ARTICLE ADIn this post I am going to share an awesome mini reactjs script to add rating star feature on your website. This is tiny reactjs code to implement rating star feature with your website product and services so that visitor can rate your product and services.
const Rating = React.createClass({ displayName: "Rating",
getInitialState: function () {
const stars = this.props.stars;
return {
value: stars,
dynamicValue: stars };
},
handleClick: function (newValue) {
this.setState({
value: newValue,
dynamicValue: newValue });
if (this.props.onRated) {
this.props.onRated(newValue);
}
},
handleMouseEnter: function (newValue) {
this.setState({ dynamicValue: newValue });
},
handleMouseLeave: function (newValue) {
this.setState({ dynamicValue: this.state.value });
},
render: function () {
const starSpans = [];
for (let v = 1; v <= 5; v++) {if (window.CP.shouldStopExecution(0)) break;
if (v <= this.state.dynamicValue) {
starSpans.push( /*#__PURE__*/
React.createElement("span", {
key: v,
className: "star",
onMouseEnter: this.handleMouseEnter.bind(this, v),
onMouseLeave: this.handleMouseLeave.bind(this, v),
onClick: this.handleClick.bind(this, v) }, "\u2605"));
} else {
starSpans.push( /*#__PURE__*/
React.createElement("span", {
key: v,
className: "star",
onMouseEnter: this.handleMouseEnter.bind(this, v),
onMouseLeave: this.handleMouseLeave.bind(this, v),
onClick: this.handleClick.bind(this, v) }, "\u2606"));
}
}window.CP.exitedLoop(0);
return /*#__PURE__*/React.createElement("div", null, starSpans);
} });
function handleRated(newRating) {
console.log(`The new rating is: ${newRating}`);
}
ReactDOM.render( /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(Rating, { stars: 1, onRated: handleRated }), /*#__PURE__*/
React.createElement(Rating, { stars: 2 }), /*#__PURE__*/
React.createElement(Rating, { stars: 3 }), /*#__PURE__*/
React.createElement(Rating, { stars: 4 }), /*#__PURE__*/
React.createElement(Rating, { stars: 5 })),
document.getElementById('container'));
This awesome script developed by dwayne. Visit their official repository for more information and follow for future updates.
Bengali (Bangladesh) · 
English (United States) ·