React material Snippet

Snippet for developers using material UI with react

Authors

• @luongdeveloper

Snippet

Material React Snippet

// m-alert
<Alert severity="success">content</Alert>

// m-alert-tt
<Alert severity="info">
    <AlertTitle>title</AlertTitle>
    content
</Alert>

// m-chip
<Chip variant="default" label="content" color="default" />

// m-btn
<Button variant="contained" color="inherit">
    content
</Button>

// m-radio
<RadioGroup value={value}>
    <FormControlLabel control={<Radio value={value} color={"default"} />} label="content" />
</RadioGroup>

// m-check-box
<FormControlLabel control={<Switch checked={true} color={"default"} />} label="content" />

// m-switch
<FormControlLabel control={<Checkbox checked={true} color={"default"} />} label="content" />

// m-fbtn
<Fab variant="circular" color="inherit">
    <AddIcon />
</Fab>

// m-input
<TextField variant="filled" color="primary" label="label" />

// m-accor
<Accordion>
    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>title</Typography>
    </AccordionSummary>
    <AccordionDetails>
        <Typography>content</Typography>
    </AccordionDetails>
</Accordion>

// m-c-progress
<CircularProgress color="primary" variant="determinate" />

// m-l-progress
<LinearProgress color="primary" variant="determinate" />

// m-backdrop
<Backdrop open={true}>
    <CircularProgress color="primary" variant="determinate" />
</Backdrop>

// m-backdrop
<Backdrop open={true}>
    <CircularProgress color="primary" variant="determinate" />
</Backdrop>

// m-avt
<Avatar variant="circle">content</Avatar>

// m-avt-img
<Avatar variant="circle" src={link} />

// m-gavt
<AvatarGroup max={max}>
    <Avatar variant="circle">content</Avatar>
</AvatarGroup>

// m-gavt-img
<AvatarGroup max={max}>
    <Avatar variant="circle" src={link} />
</AvatarGroup>

// m-badge
<Badge badgeContent={value} color="primary">
    icon
</Badge>

// m-divi
<Divider />

// m-tt
<Tooltip title={title} arrow>
    cpn
</Tooltip>

// m-typo
<Typography variant="h1" color="inherit">
    content
</Typography>

// m-tr-co
<Collapse in={true} timeout={timeout}>
    cpn
</Collapse>

// m-tr-gr
<Grow in={true} timeout={timeout}>
    cpn
</Grow>

// m-tr-zo
<Zoom in={true} timeout={timeout}>
    cpn
</Zoom>

// m-tr-sl
<Slide direction="up" in={true} timeout={timeout}>
    cpn
</Slide>

// m-input-suggest
<Autocomplete
    options={arrayData}
    getOptionLabel={(option) => label}
    renderInput={(params) => <TextField {...params} label="label" variant="filled" />}
/>

// m-paging
<Pagination count={total} color="primary" />