Setting up half-icons with a rating system

Question

I built a component that is basically a rating system that allows you to add more icons depending on the dropdown.

I was wondering if there was a way to make half stars, I've looked through older code on the internet, but there isn't anything that has been updated. Any help with be appreciated

import React, { useState } from 'react'
import {FaStar} 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 (
        
            
             Select Amount of Icons 


            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return (
                    
                         setRating(value)}
                        />
                         setHover(value)}
                                onMouseLeave={() => setHover(null)}
                        />
                    
                )
            })}
        
    )
}

export default Rater

user_12598378 · Answer

I looked at your code, Your star icon is in SVG. You can write a gradient template and add fill: url(#id) to the star you want to change

.linear-gradient-template {
  width: 0;
  height: 0;
}

    import React, { useState } from 'react'
import {FaStar} 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)
    const size = 100

    return (
        
            
            
             Select Amount of Icons 
            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1
                return (
                    
                         setRating(value)}
                        />
                         setHover(value)}
                            onMouseLeave={() => {
                                let svgDom = document.getElementsByClassName('star')[i]
                                let pathDom = svgDom.children[0]
                                pathDom.style.fill = ''
                                setHover(null)
                            }}
                            onMouseMove={e => {
                                let svgDom = document.getElementsByClassName('star')[i]
                                let pathDom = svgDom.children[0]
                                if(e.pageX - svgDom.getBoundingClientRect().left <= size / 2){
                                    pathDom.style.fill = 'url(#orange_red)'
                                } else {
                                    pathDom.style.fill = ''
                                }
                            }}
                        />
                    
                )
            })}
        
    )
}

export default Rater

Above, I change your code, It is not perfect, you can modify it according to your needs.

user_10089348 · Answer

There are several ways of accomplish that, a simple one may (I don't know if it is the best for you application) can be use tree layers: A background, a transparent icon and another one that will be the "fill" of the star.

You may then position the star inside the background, and put the "fill" layer behind the star. You then set the fill layer width according to the rating.

Another option can use two icons, one for the filled star and another for the half star. You could also use polygons to represent the stars and manipulate the points via CSS. I think the layered solution is better because you will not need to export a new icon asset or manipulate polygons directly, all you would need is to position some divs, one over another and manipulate their width based on the rate amount

Setting up half-icons with a rating system

2 Answers