I keep calling it "Star Rating" because it's the default use-case, but you can obviously select any other icon and it will work great. Let me know if you found this interesting or if you used it in your own project. ⭐🙏
@him1019
Ай бұрын
Absolutely fantastic video. You've done a great job explaining how it all works. Appreciate the help.
@AleksPopovic
Ай бұрын
@@him1019 Thank you very much! Welcome to the channel!
@Ayoubased
Ай бұрын
very nice tutorial, example of those half star libraries please? just for the display
@AleksPopovic
Ай бұрын
Thank you Ayoub, and welcome to the channel! You can try react-simple-star-rating , it supports half stars/icons.
@Ayoubased
Ай бұрын
@@AleksPopovic oh nice. Thank you Aleks!
@milos-makes-maps
11 ай бұрын
Such a creative tutorial, Aleks. Thank you!
@AleksPopovic
11 ай бұрын
Thank you very much Milos! Glad you liked it! 🙏
@syedurwah
6 ай бұрын
how can we acheive the value like 1.5 or 3.5 etc
@AleksPopovic
6 ай бұрын
Hello Syed and welcome to the channel! You could approach half values in several different ways. If you don't want to deviate that much from the current solution you could make the DEFAULT_COUNT = 10, and you would treat each element as a half. That means you would need half-star or half-heart icons for left and right half and you would alternate them. You would also need to adjust the spacing between the halves so they touch and form a full star/heart.
@veronikaturner3406
6 ай бұрын
Thank you, much appreciated!! :)
@AleksPopovic
6 ай бұрын
Glad you enjoyed the video! Welcome to the channel!
@chriscalver8595
4 ай бұрын
Hey Aleks thanks for the video. I've used your component in a recent demo project and love it. I use the component to display the star value from my api on a parent component. Looks great. Then I use it again in a child component's form to update the api. Works great again. The issue is getting the Star component on the parent component to refresh with the new value. Here's how i use it on the parent. {data.rating} Stars The {data.rating} shows the changes in text and in console (on the right above) but not inside the Stars. (on the left above) The stars component only updates after a page refresh. Any ideas? Thank you again
@AleksPopovic
4 ай бұрын
Hey Chris, it's awesome that you're building stuff on top of this mini project. In your use case the issue is the initial value setup with useState inside of Stars component. The fix would be to move the state handling for the value "up", to the parent component, and to also do the setting of the value in the parent component. You would pass in the value and setValue as props into instead of handling them in the Stars component and that way the updates will go through when the value changes. Hope this helps. Welcome to the channel, and good luck with your project!
@chriscalver8595
4 ай бұрын
@@AleksPopovic Took me a couple days but i got it all to work. Thanks for the advice Aleks
@AleksPopovic
4 ай бұрын
@@chriscalver8595 That's great Chris, really glad you got it working.
@sowmyav2221
3 ай бұрын
can you do a video on half star ratings also ?
@AleksPopovic
3 ай бұрын
@@sowmyav2221 I would love to, but I can't make any promises. In one of the comments here I explained the general process for it, though, so maybe you can try with that in the meantime.
Пікірлер: 18