ejemplo de código npm react-star-rating-component

Hemos buscado por distintos sitios para de esta manera tenerte la solución para tu inquietud, en caso de dificultades deja tu duda y te responderemos con mucho gusto.

Ejemplo: componente de clasificación de estrellas reutilizable en react

importBox,
  createStyles,Grid,Input,
  makeStyles,Theme,FormHelperTextfrom'@material-ui/core';importReactfrom'react';importStarIconfrom'@material-ui/icons/Star';importclsxfrom'clsx';//---------------------------------------------------const useStyles =makeStyles((theme:Theme)=>createStyles(
    unCheckedIcon:
      color:'grey',
      fontSize:'50px',
    poorRating:
      color:'#ff2824',
      fontSize:'50px',
    badRating:
      color:'#F7680C',
      fontSize:'50px',
    averageRating:
      color:'#FF9529',
      fontSize:'50px',
    goodRating:
      color:'#FDCC0D',
      fontSize:'50px',
    greatRating:
      color:'#FFDF00',
      fontSize:'50px'));exportdefaultfunctionStarRating(
  register,
  error,
  helperText,
  name
:
  register: any;
  error: any;
  helperText: any;
  name: any;)const classes =useStyles();const[rating, setRating]=React.useState(0);const[hover, setHover]=React.useState(0);return(<Grid item xs=12><Box><div>[...Array(5)].map((s, i)=>const ratingValue = i +1;return(<label key=i><Input
                  type="radio"
                  name=name
                  inputRef=register
                  error=error
                  hidden
                  value=ratingValue
                  onClick=()=>setRating(ratingValue)/><StarIcon
                  className= rating)?clsx([classes.poorRating]: ratingValue ===1,[classes.badRating]: ratingValue ===2,[classes.averageRating]: ratingValue ===3,[classes.goodRating]: ratingValue ===4,[classes.greatRating]: ratingValue ===5): classes.unCheckedIcon
                  onMouseEnter=()=>setHover(ratingValue)
                  onMouseLeave=()=>setHover(rating)
                  fontSize="large"/></label>);)error && helperText &&(<FormHelperText error=true>helperText</FormHelperText>)</div></Box></Grid>);

Recuerda que puedes compartir este artículo si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador