@s-ui/react-molecule-rating v1.21.0

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.