stars-rating-react-hooks
v0.2.4
Published
Stars rating with react-hooks, flexible and customizable component (headless)
Downloads
48
Maintainers
Readme
stars-rating-react-hooks ⭐️
React Rating Stars - Customizable and headless hooks.
See Website and demos
Install
npm install --save stars-rating-react-hooks
Usage (Basic)
import React from 'react'
import { StarsRating } from "stars-rating-react-hooks";
function Example() {
const config = {
totalStars: 5,
initialSelectedValue: 4.5,
renderFull: (
<img src="https://img.icons8.com/ios-filled/50/000000/star--v1.png" />
),
renderEmpty: (
<img src="https://img.icons8.com/ios/50/000000/star--v1.png" />
),
renderHalf: (
<img src="https://img.icons8.com/ios-filled/50/000000/star-half-empty.png" />
)
};
return <StarsRating config={config} />
}
export default Example
Usage (Customizable and Headless)
import { useStars } from 'stars-rating-react-hooks'
const config = {
totalStars: 5,
initialSelectedValue: 2,
renderFull: '★',
renderEmpty: '☆',
};
const {
stars,
getStarProps,
getStarWrapperProps,
isSelecting,
selectingValue,
selectedValue,
} = useStars(config);
<span
{...getStarWrapperProps({
style: {
cursor: 'pointer',
display: 'inline-block'
},
})}
>
{stars?.map((star, i) => (
<span
key={i}
{...getStarProps(i, {
style: {
fontSize: '40px',
display: 'inline-block'
},
onClick: (event, ratedValue) => {
console.log(`You just rated ${ratedValue} Stars!!`);
},
})}
>
{star}
</span>
))}
</span>
'getStarWrapperProps' and 'getStarProps' are prop getters, More info on prop getters
Demo:
Basic
Customizable and Headless:
License
MIT © 07harish