One of the components I have deals with a star rating system, and I thought it would be cool to use Font Awesome icons for half stars. Everything is working well except for the CSS styling aspect. While I managed to position some of the stars correctly by flipping them (Font Awesome icons can only span in one direction), they are not touching as desired. Any suggestions on the most straightforward way to address this issue?
Rater.js
import React, { useState } from 'react'
import {FaStarHalf} from "react-icons/all";
import './Rater.css'
const Rater = () => {
const [rating, setRating] = useState(null);
const [hover, setHover] = useState(null);
const [value] = useState(100);
const [iconValue, setIconValue] = useState(5);
return (
<div>
<select
onChange={e => {
setIconValue(Number(e.target.value));
}}
>
{Array.from(new Array(value), (value, index) => index + 1).map(
value => (
<option key={value} value={value}>
{value}
</option>
)
)}
</select>
<h1> Select Amount of Icons </h1>
{[...Array(iconValue), ...Array(iconValue)].map((icon, i) => {
const value = i + 1;
return (
<label>
<input
type="radio"
name="rating"
value={value}
onClick={() => setRating(value)}
/>
<FaStarHalf
className={i % 2 ? "star-left" : "star"}
color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
size={100}
onMouseEnter={() => setHover(value)}
onMouseLeave={() => setHover(null)}
/>
</label>
);
})}
</div>
);
};
export default Rater
Rater.css
input[type='radio'] {
display: none;
}
.star {
cursor: pointer;
transition: color 200ms;
/*transform: rotate(180deg);*/
}
.star-left {
cursor: pointer;
transition: color 200ms;
transform: scaleX(-1);
}