REACT create half star rating react - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create half star rating in react


 386

REACT


2

/* based on https://codesandbox.io/s/xpl2wjpyoq */

// index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
<div id="root"></div>
<script src = "index.js"></script>
</body>
</html>

// Rating.js
import React from "react";

class Rating extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
rating: this.props.rating || null,
temp_rating: null
};
}

handleMouseover(rating) {
this.setState(prev => ({
rating,
temp_rating: prev.rating
}));
}

handleMouseout() {
this.setState(prev => ({
rating: prev.temp_rating
}));
}

rate(rating) {
this.setState({
rating,
temp_rating: rating
});
}

render() {
const { rating } = this.state;
let stars = [];
for (let i = 0; i < 10; i++) {
console.log("i", i);
let klass = "ion-ios-star-outline";
if (this.state.rating >= i && this.state.rating !== null) {
klass = "ion-ios-star";
}
stars.push(
<i
style={{ display: "inline-block", width: "7px", overflow: "hidden", direction: (i%2===0) ?
"ltr" : "rtl"}}
className={klass}
onMouseOver={() => this.handleMouseover(i)}
onClick={() => this.rate(i)}
onMouseOut={() => this.handleMouseout()}
/>
);
}
return (
<div className="rating">
{stars}
</div>
);
}
}

export default Rating;

// index.js
import React from "react";
import { render } from "react-dom";
import Rating from "./Rating";

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

const App = () =>
<div style={styles}>
<Rating rating={5} />
</div>;

render(<App />, document.getElementById("root"));


By     Created   
The power of the user (%)
2%



The most helpful REACT solutions

How to get client ip address using react ?How to get client ip address using react ?REACT

Click to see more ...

  4.6K     419

how to get the type of a device using react ?how to get the type of a device using react ?REACT

Click to see more ...

  1.4K     203

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  833     127

How to get latitude and longitude using react/javascript ?How to get latitude and longitude using react/javascript ?REACT

Click to see more ...

  619     104

get ip address reactget ip address reactREACT

Click to see more ...

  377     80

time ago reacttime ago reactREACT

Click to see more ...

  291     73

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  261     58

get client country reactget client country reactREACT

Click to see more ...

  325     53

detect browser reactdetect browser reactREACT

Click to see more ...

  298     52

how to detect a mobile device not tablet using react ?how to detect a mobile device not tablet using react ?REACT

Click to see more ...

  244     51