awran5 / react-simple-star-rating

A simple react component for adding a star rating to your project.
https://react-simple-star-rating.vercel.app/
MIT License
136 stars 32 forks source link

Add Icon Margin Request / Wrong Rating shown #44

Open UGU-Academy opened 1 year ago

UGU-Academy commented 1 year ago

Problem: if you want to add custom margin to your icons you can't do it properly. You can set margin on the icon itself, like wrap it in another span and give it a margin, but that will brake the precision of the icons shown.

Here is the example: I've given a marginRight to my custom icon and I've set initialValue to 3.5:

image

I can give a padding to my custom icon and it will correctly show values with .5 , but if we have .2 or .7 it will not look precisely.

I assume that right now this library simply creates 2 divs one with empty and one with filled icons and later on based on the initialValue make them overlap to some extend.

So, if you make a margin between icons it will brake the precision.

My suggestion is to fill each icon separately: If initialValue is for example 3.3 - it will fill each icon separately: 3 will be filled and one will be filled only for 30%. This will still work if you have 10 icons. Also, we will need to add new properties to the lib: iconMarginRight & iconMarginLeft - which will enable developers to set custom margins on the icon.

Let me know if this can be implemented.