@s-ui/react-molecule-rating
v1.21.0
Published
`MoleculeRating` will display a rating showing how good or popular someone o something is.
Downloads
6,475
Maintainers
Keywords
Readme
MoleculeRating
MoleculeRating
will display a rating showing how good or popular someone o something is.
Installation
$ npm install @s-ui/react-molecule-rating --save
Usage
import MoleculeRating, {MoleculeRatingSizes} from '@s-ui/react-molecule-rating'
Basic usage
<MoleculeRating value={2} label="25 opiniones"/>
With Link
<MoleculeRating value={4} label="25 opiniones" link href="https://www.adevinta.com/"/>
With MEDIUM size
<MoleculeRating value={4} label="25 opiniones" size={MoleculeRatingSizes.MEDIUM} link href="https://www.adevinta.com/"/>
With CUSTOM icons
import {IconStarFilled, IconStarHalfFilled, IconStarEmpty} from './Icons'
const customPropsStar = {
IconStarFilled,
IconStarHalfFilled,
IconStarEmpty
}
<MoleculeRating
value={3.5}
size={MoleculeRatingSizes.LARGE}
label="25 opiniones"
{...customPropsStar}
/>
With Hover and onClick
<MoleculeRating
isHovered
ratingValues={[1, 2, 3, 4, 5]}
size={MoleculeRatingSizes.LARGE}
onClick={handleClick}
/>
Find full description and more examples in the demo page.