Skip to content

vscodeshift/mui-snippets

BranchesTags

Repository files navigation

material-ui-snippets

CircleCI semantic-release Commitizen friendly Visual Studio Marketplace Version

Snippets for Material-UI

Note: To insert these, you have to Trigger Suggest (⌃Space on macOS) and then type in the name; or you can enable the Editor: Tab Completion setting, then type the name of the snippet and press Tab.

These snippets work in JavaScript React and TypeScript React mode. If you use JSX in .js files you will need to click on JavaScript in the bottom right corner of VSCode and Configure File Association for .js... to be JavaScript React.

Features

  • Works in JSX and TSX
  • Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)
  • You can configure whether to use controlled or uncontrolled form controls in the extension settings.

Snippets

muiAppBar: <AppBar>

<AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}">
  <Toolbar$3>
    <Typography variant="h6"$4>
      $0
    </Typography>
  </Toolbar>
</AppBar>

muiAppBarMenu: <AppBar> with menu icon

<AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}">
  <Toolbar$3>
    <IconButton edge="start" color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6"$4>
      $0
    </Typography>
  </Toolbar>
</AppBar>

muiBottomNavigation: <BottomNavigation>

<BottomNavigation
  value={$1}
  onChange={$2}
  $3
>
  $0
<BottomNavigation>

muiBottomNavigationAction: <BottomNavigationAction>

<BottomNavigationAction label="$1" value={$2} icon={$3}$0 />

muiButton: <Button>

<Button variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}"$3>
  $0
</Button>

muiButtonGroup: <ButtonGroup>

<ButtonGroup variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" aria-label="$3"$4>
  <Button>$5</Button>
  <Button>$6</Button>
  $0
</ButtonGroup>

muiButtonGroupSize: <ButtonGroup> with size

<ButtonGroup variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" size="${3|small,medium,large|}" aria-label="$4"$5>
  <Button>$6</Button>
  <Button>$7</Button>
  $0
</ButtonGroup>

muiButtonGroupVertical: vertical <ButtonGroup>

<ButtonGroup orientation="vertical" variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" aria-label="$3"$4>
  <Button>$5</Button>
  <Button>$6</Button>
  $0
</ButtonGroup>

muiButtonSize: <Button> with size

<Button variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" size="${3|small,medium,large|}"$4>
  $0
</Button>

muiButtonText: text <Button>

<Button color="${1|default,inherit,primary,secondary|}"$2>
  $0
</Button>

muiButtonWithIcon: <Button> with icon and label

<Button
  variant="${1|text,contained,outlined|}"
  color="${2|default,inherit,primary,secondary|}"
  startIcon={$3}
  $4
>
  $0
</Button>

muiCardHeader: <CardHeader>

<CardHeader${1:
  avatar={
    <Avatar aria-label="$2"$3>
      $4
    </Avatar>
  \}}${5:
  action={
    <IconButton aria-label="$6"$7>
      ${8:<MoreVertIcon />}
    </IconButton>
  \}}${9:
  title="$10"}${11:
  subheader="$12"}
  $13
/>

muiCardMedia: <CardMedia>

<CardMedia
  title="$1"
  image=$2
/>

muiCheckboxLabel: <Checkbox> with <FormControlLabel>

Controlled

<FormControlLabel
  label="$1"
  control={
    <Checkbox
      value="$2"
      checked={$3}
      onChange={$4}
      color="${5:primary}"
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  control={
    <Checkbox
      value="$2"
      defaultChecked={$3}
      color="${4:primary}"
    />
  }
/>

muiCheckboxLabelPlacement: <Checkbox> with labelPlacement

Controlled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Checkbox
      value="$3"
      checked={$4}
      onChange={$5}
      color="${6:primary}"
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Checkbox
      value="$3"
      defaultChecked={$4}
      color="${5:primary}"
    />
  }
/>

muiContainer: <Container>

<Container maxWidth="${1|xs,sm,md,lg,xl|}"$2>
  $0
</Container>

muiDialog: <Dialog>

<Dialog open={$1} onClose={$2} aria-labelledby="$3">${4:
  <DialogTitle id="$3">$5</DialogTitle>}${6:
  <DialogContent>
    ${7:<DialogContentText>
      $8
    </DialogContentText>}
  </DialogContent>}${9:
  <DialogActions>
    <Button onClick={$2\} color="${10|default,inherit,primary,secondary|}">
      ${11:Cancel}
    </Button>
  </DialogActions>}
</Dialog>

muiDialogSimple: <Dialog>

<Dialog open={$1} onClose={$2} aria-labelledby="$3">
  ${4:<DialogTitle id="$3">$5</DialogTitle>}
  $0
</Dialog>

muiDrawerPermanent: permanent <Drawer>

<Drawer
  variant="permanent"
  anchor="${1|left,right,top,bottom|}"
  $2
>
  $0
</Drawer>

muiDrawerPersistent: persistent <Drawer>

<Drawer
  variant="persistent"
  anchor="${1|left,right,top,bottom|}"
  open={$2}
  $3
>
  $0
</Drawer>

muiDrawerTemporary: temporary <Drawer>

<Drawer
  variant="temporary"
  anchor="${1|left,right,top,bottom|}"
  open={$2}
  onClose={$3}
  $4
>
  $0
</Drawer>

muiEndAdornment: end <InputAdornment>

endAdornment={
  <InputAdornment position="end">
    $0
  </InputAdornment>
}

muiExpansionPanel: <ExpansionPanel>

<ExpansionPanel>
  <ExpansionPanelSummary
    expandIcon={<ExpandMoreIcon />}
    aria-label="${1:Expand}"
    aria-controls="$2-content"
    id="$2-header"
  >
    <Typography $3>$4</Typography>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    $0
  </ExpansionPanelDetails>
</ExpansionPanel>

muiExpansionPanelControlled: controlled <ExpansionPanel>

<ExpansionPanel expanded={$1} onChange={$2}>
  <ExpansionPanelSummary
    expandIcon={<ExpandMoreIcon />}
    aria-label="${3:Expand}"
    aria-controls="$4-content"
    id="$5-header"
  >
    <Typography $6>$7</Typography>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>
    $0
  </ExpansionPanelDetails>
</ExpansionPanel>

muiFab: <Fab>

<Fab color="${1|default,inherit,primary,secondary|}" aria-label="$2"$3>
  <$4Icon />
</Fab>

muiFabExtended: <Fab variant="extended">

<Fab variant="extended" color=${1|default,inherit,primary,secondary|}$2>
  <Box marginRight={1}>
    <$3Icon />
  </Box>
  $0
</Fab>

muiFormControl: <FormControl>

<FormControl$1>
  <FormLabel>$2</FormLabel>
  $0
  <FormHelperText>$3</FormHelperText>
</FormControl>

muiFormControlGroup: <FormControl> with <FormGroup>

<FormControl component=${1:"fieldset"}$2>
  <FormLabel component=${3:"legend"}>$4</FormLabel>
  <FormGroup>
    $0
  </FormGroup>
  <FormHelperText>$5</FormHelperText>
</FormControl>

muiGridContainer: <Grid container>

<Grid container spacing={${1:1}}$2>
  $0
</Grid>

muiGridContainerCenter: <Grid container> with centering

<Grid
  container
  spacing={${1:1}}${2:
  direction="${3|row,row-reverse,column,column-reverse|}"}
  justify="${4:center}"
  alignItems="${5:center}"
  alignContent="${6:center}"${7:
  wrap="${8|nowrap,wrap,wrap-reverse|}"}
  $9
>
  $0
</Grid>

muiGridContainerFull: <Grid container> with all props

<Grid
  container${1:
  spacing={${2:1}\}}${3:
  direction="${4|row,row-reverse,column,column-reverse|}"}${5:
  justify="${6|flex-start,center,flex-end,space-between,space-around,space-evenly|}"}${7:
  alignItems="${8|flex-start,center,flex-end,stretch,baseline|}"}${9:
  alignContent="${10|stretch,center,flex-start,flex-end,space-between,space-around|}"}${11:
  wrap="${12|nowrap,wrap,wrap-reverse|}"}
  $13
>
  $0
</Grid>

muiGridListSubheader: <GridList> subheader

<GridListTile cols={${1:2}} style={{ height: 'auto' }}>
  <ListSubheader component="div">$0</ListSubheader>
</GridListTile>

muiGridListTilebar: <GridListTileBar>

<GridListTileBar${1:
  title="$2"}${3:
  subtitle="$4"}${5:
  actionIcon={
    <IconButton aria-label="$6"$7>
      $0
    </IconButton>
  \}}
/>

muiIconButton: <IconButton>

<IconButton aria-label="$1" onClick={$2}$3>
  $0
</IconButton>

muiMenu: <Menu>

<Menu
  id="$1"
  anchorEl={$2}
  keepMounted
  open={Boolean($2)}
  onClose={$3}
  $4
>
  $0
</Menu>

muiMenuItem: <MenuItem>

<MenuItem onClick={$1}$2>$0</MenuItem>

muiMenuPopupState: <Menu> for material-ui-popup-state

<Menu
  id="$1"
  keepMounted
  {...bindMenu(${2:popupState})}
  $3
>
  $0
</Menu>

muiRadioGroup: <FormControl> with <RadioGroup>

<FormControl component=${1:"fieldset"}$2>
  <FormLabel component=${3:"legend"}>$4</FormLabel>
  <RadioGroup aria-label="$5" name="$6" value={$7} onChange={$8}>
    $0
  </RadioGroup>
  <FormHelperText>$9</FormHelperText>
</FormControl>

muiRadioLabel: <Radio> with <FormControlLabel>

<FormControlLabel value="$1" label="$2" control={<Radio $0 />} />

muiRadioLabelPlacement: <Radio> with <FormControlLabel> with labelPlacement

<FormControlLabel value="$1" label="$2" labelPlacement="${3|end,start,top,bottom|}" control={<Radio $0 />} />

muiSelectItem: <MenuItem> inside <Select>

<MenuItem value={$1}$2>$0</MenuItem>

muiSliderContinuous: <Slider> with continuous values

Controlled

<Slider
  value={$1}
  onChange={$2}
  aria-labelledby="$3"
  min={$4:0}
  max={$5:100}
  $0
/>

Uncontrolled

<Slider
  defaultValue={$1}
  aria-labelledby="$2"
  min={$3:0}
  max={$4:100}
  $0
/>

muiSliderDiscrete: <Slider> with discrete values

Controlled

<Slider
  value={$1}
  onChange={$2}
  aria-labelledby="$3"
  step={$4:1}
  marks
  min={$5:0}
  max={$6:100}
  $0
/>

Uncontrolled

<Slider
  defaultValue={$1}
  aria-labelledby="$2"
  step={$3:1}
  marks
  min={$4:0}
  max={$5:100}
  $0
/>

muiSnackbar: <Snackbar>

<Snackbar
  anchorOrigin={{
    vertical: '$1',
    horizontal: '$2',
  }}
  open={$3}
  onClose={$4}
  message="$5"${6:
  action={
    <IconButton size="small" aria-label="close" color="inherit" onClick={$4\}>
      <CloseIcon fontSize="small" />
    </IconButton>
  \}}
/>

muiSnackbarContent: <SnackbarContent>

<SnackbarContent
  message="$1"
  action={$2}
/>

muiStartAdornment: start <InputAdornment>

startAdornment={
  <InputAdornment position="start">
    $0
  </InputAdornment>
}

muiStep: <Step>

<Step key={$1} completed={$2}$3>
  <StepLabel>$0</StepLabel>
</Step>

muiStepContent: <Step> with <StepContent>

<Step key={$1} completed={$2}$3>
  <StepLabel>$4</StepLabel>
  <StepContent>
  </StepContent>
</Step>

muiStepOptional: optional <Step>

<Step key={$1} completed={$2}$3>
  <StepLabel
    optional={<Typography variant="caption">${4:Optional}</Typography>}
  >
    $0
  </StepLabel>
</Step>

muiStepper: <Stepper>

<Stepper activeStep={$1}>
  $0
</Stepper>

muiSwipeableViews: <SwipeableViews>

<SwipeableViews
  axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
  index={$1}
  onChangeIndex={$2}
  $3
>
  $0
</SwipeableViews>

muiSwitch: <Switch>

Controlled

<Switch
  value="$1"
  checked={$2}
  onChange={$3}
  inputProps={{ 'aria-label': '$4' }}
  $0
/>

Uncontrolled

<Switch
  value="$1"
  defaultChecked="$2"
  inputProps={{ 'aria-label': '$3' }}
  $0
/>

muiSwitchLabel: <Switch> with <FormControlLabel>

Controlled

<FormControlLabel
  label="$1"
  control={
    <Switch
      value="$2"
      checked={$3}
      onChange={$4}
      $0
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  control={
    <Switch
      value="$2"
      defaultChecked="$3"
      $0
    />
  }
/>

muiSwitchLabelPlacement: <Switch> with <FormControlLabel> with labelPlacement

Controlled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Switch
      value="$3"
      checked={$4}
      onChange={$5}
      $0
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Switch
      value="$3"
      defaultChecked="$4"
      $0
    />
  }
/>

muiTabPanel: <TabPanel>

<TabPanel value={$1} index={$2}${3: dir={theme.direction\}}$4>
  $5
</TabPanel>

muiTabs: <Tabs>

<AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2>
  <Tabs value={$3} onChange={$4} aria-label="$5" $6>
    $0
  </Tabs>
</AppBar>

muiTabsScrollable: scrollable <Tabs>

<AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2>
  <Tabs
    value={$3}
    onChange={$4}
    aria-label="$5"
    variant="scrollable"
    scrollButtons="${6:auto}"
    $7
  >
    $0
  </Tabs>
</AppBar>

muiTextField: <TextField>

Controlled

<TextField
  id="$1"
  label="$2"
  value={$3}
  onChange={$4}
  $0
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  defaultValue={$3}
  $0
/>

muiTextFieldMore: <TextField> with more props

Controlled

<TextField
  id="$1"
  label="$2"${3:
  variant="${4|standard,outlined,filled|}"}${5:
  color="${6|primary,secondary|}"}${7:
  margin="${8|none,dense,normal|}"}${9:
  size="${10|small,medium|}"}
  value={$11}
  onChange={$12}
  $0
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"${3:
  variant="${4|standard,outlined,filled|}"}${5:
  color="${6|primary,secondary|}"}${7:
  margin="${8|none,dense,normal|}"}${9:
  size="${10|small,medium|}"}
  defaultValue={$11}
  $0
/>

muiTextFieldSelect: <TextField select>

Controlled

<TextField
  id="$1"
  label="$2"
  select
  value={$3}
  onChange={$4}
  $5
>
  $0
</TextField>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  select
  defaultValue={$3}
  $4
>
  $0
</TextField>

muiTextFieldVariant: <TextField> with variant

Controlled

<TextField
  id="$1"
  label="$2"
  variant="${3|standard,outlined,filled|}"
  value={$4}
  onChange={$5}
  $0
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  variant="${3|standard,outlined,filled|}"
  defaultValue={$4}
  $0
/>

muiTooltip: <Tooltip>

<Tooltip title="$1"$2>
  $TM_SELECTED_TEXT$0
</Tooltip>

muiTypography: <Typography>

<Typography variant="${1|h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,caption,button,overline,srOnly,inherit|}"${2: color="${3|initial,inherit,primary,secondary,textPrimary,textSecondary,error|}"}$4>$TM_SELECTED_TEXT$0</Typography>

About

Code snippets for MUI

Topics

snippets material-ui vscode

Resources

Readme

License

MIT license
Activity
Custom properties

Stars

30 stars

Watchers

1 watching

Forks

6 forks
Report repository

Releases 2

v1.0.1 Latest
Sep 29, 2021
+ 1 release

Packages

No packages published

Contributors 2

  •  
  •  

Languages