@material-ui/lab#Rating JavaScript Examples

The following examples show how to use @material-ui/lab#Rating. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Ratings.jsx    From FEC with MIT License 6 votes vote down vote up 
Ratings = (props) => {
  return (
    <div className='reviews'>
      <Rating value={props.rating}
        precision={0.25}
        max={5}
        name="unique-rating"
        readOnly
      />
    </div>
  )
}
Example #2
Source File: star-rating.js    From horondi_client_fe with MIT License 6 votes vote down vote up 
StarRating = ({ rate, size = 'normal', disabled = false, precision = 0.1 }) => (
  <Rating
    name='simple-controlled'
    value={rate}
    size={size}
    disabled={disabled}
    precision={precision}
  />
)
Example #3
Source File: ReviewPopupButton.js    From git-brunching with GNU General Public License v3.0 4 votes vote down vote up 
ReviewPopupButton = ({restaurant}) => {
        const [open, setOpen] = React.useState(false);
        const restaurantName = restaurant.Name;
        const restaurantId = restaurant.ID;
        // Show popup
        const handleClickOpen = (e) => {
        // Prevent click from propagating to restaurant card and going straight to booking
        e.stopPropagation();
        setOpen(true);
        }
    
        // Hide popup
        const handleClose = (e) => {
        // Prevent click from propagating to restaurant card when exiting popup
        e.stopPropagation();
        setOpen(false);
        };

        const handlePopupClick = (e) => {
        e.stopPropagation();
        } 

        const labels = {
            0.5: 'Useless',
            1: 'Very poor',
            1.5: 'Poor',
            2: 'Below average',
            2.5: 'Average',
            3: 'Above average',
            3.5: 'Good',
            4: 'Great',
            4.5: 'Excellent',
            5: 'Outstanding',
        };
          
        const useStyles = makeStyles({
            root: {
              width: 400,
              display: 'flex',
              alignItems: 'center',
            },
        });

        const [value, setValue] = React.useState(2);
        const [hover, setHover] = React.useState(-1);
        const classes = useStyles();
    
        return (
        <>
            <IconButton
                className={style.reviewButton}
                onClick={handleClickOpen}>
                <RateReviewIcon className={style.reviewIcon}/> 
            </IconButton>
            
            <Dialog open={open} onClose={handleClose} onClick={handlePopupClick} >
                <DialogTitle className={style.reviewPopup}>
                <Typography className={style.reviewPopup}>
                    {restaurantName}'s Reviews
                    <DialogContent>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="name"
                            type="name"
                            label="Name"
                            fullWidth
                        />
                        <div className={classes.root}>
                            <Rating
                                name="hover-feedback"
                                value={value}
                                precision={0.5}
                                onChange={(event, newValue) => {
                                setValue(newValue);
                                }}
                                onChangeActive={(event, newHover) => {
                                setHover(newHover);
                                }}
                            />
                            {value !== null && <Box ml={1}>{labels[hover !== -1 ? hover : value]}</Box>}
                        </div>
                        <DialogContentText>
                            Please submit any comments here
                        </DialogContentText>
                        <TextField
                            multiline
                            rows = "4"
                            autoFocus
                            margin="dense"
                            id="review"
                            type="review"
                            fullWidth
                        />
                    </DialogContent>
                </Typography>
                </DialogTitle>
                <div className={style.reviewButtonsContainer}>
                    <Button variant="outlined" className={style.primaryButton} onClick={handleClose}>Cancel</Button>
                    <Button variant="outlined" className={style.secondaryButton} onClick={handleClose}>Submit</Button>
                </div>
            </Dialog>
        </>
        );
    }