Skip to main content

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"/>
<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.