What Can You Do With a Single HTML Element? I Just Made a Customizable Rating Component With It
Why Single HTML Element?
- just a fun challenge, interesting right? and yes this was my first thought, and turns out a single element can do quite a lot
- less elements, better performance, alough most projects won’t encounter performance problem, still someone may need it
How To Code It Out?
1. remove default styles of input[range]
a input of type range is pretty suitable for the rating job, for rating 1–5 stars, just like setting the range, but first we need to remove the default styles of range element
then remove dot
2. create svg backgrounds
more like a rating component now, next we join the pieces and make it a whole
3. build a react component
generate svg backgrounds, adjust styles, apply value and callback when change, for the full codes please refer this repo
That’s all for today, thanks!