Skip to content

vscodeshift/mui-snippets

BranchesTags

Repository files navigation

Snippets for MUI

demo

CircleCI semantic-release Commitizen friendly Visual Studio Marketplace Version

Note: There are two ways to insert these:

  • 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.
  • Execute the corresponding editor commands like MUI: insert <Button> (or even better, make keybindings for them!).

Performance Warning: Currently, the suggestions can cause performance issues due to VSCode API limitations. After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround is to either disable adding automatic imports for snippets (Settings > Extensions > MUI Snippets > Add Completion Imports) or use the commands to insert snippets instead of suggestions.

Features

  • Works in JS/X 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.

Using Material-UI v4?

For Material-UI v4 you'll need material-ui-snippets instead. This extension is for MUI v5.

Settings

Form Control Mode

  • controlled - inserts value and onChange properties
  • uncontrolled - inserts defaultValue property

Import Paths

  • auto - uses top level if other top level imports are found, second level otherwise
  • top level - import { Button } from '@mui/material'
  • second level - import Button from '@mui/material/Button'

Snippets

muiAccordion: MUI <Accordion>

<Accordion>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-label="${1:Expand}"
    aria-controls="$2-content"
    id="$2-header"
  >
    <Typography$3>$4</Typography>
  </AccordionSummary>
  <AccordionDetails>$5</AccordionDetails>
</Accordion>

muiAccordionControlled: MUI controlled <Accordion>

<Accordion expanded={$1} onChange={$2}>
  <AccordionSummary
    expandIcon={<ExpandMore />}
    aria-label="${3:Expand}"
    aria-controls="$4-content"
    id="$4-header"
  >
    <Typography$5>$6</Typography>
  </AccordionSummary>
  <AccordionDetails>$7</AccordionDetails>
</Accordion>

muiAppBar: MUI <AppBar>

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

muiAppBarMenu: MUI <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">
      <Menu />
    </IconButton>
    <Typography variant="h6"$4>
      $5
    </Typography>
  </Toolbar>
</AppBar>

muiBottomNavigation: MUI <BottomNavigation>

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

muiBottomNavigationAction: MUI <BottomNavigationAction>

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

muiButton: MUI <Button>

<Button variant="${1|text,contained,outlined|}" color="${2|primary,secondary,inherit,success,error,info,warning|}"$3>
  $4
</Button>

muiButtonGroup: MUI <ButtonGroup>

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

muiButtonGroupSize: MUI <ButtonGroup> with size

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

muiButtonGroupVertical: MUI vertical <ButtonGroup>

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

muiButtonSize: MUI <Button> with size

<Button
  variant="${1|text,contained,outlined|}"
  color="${2|primary,secondary,inherit,success,error,info,warning|}"
  size="${3|small,medium,large|}"
  $4
>
  $5
</Button>

muiButtonText: MUI text <Button>

<Button
  color="${1|primary,secondary,inherit,success,error,info,warning|}"
  $2
>
  $3
</Button>

muiButtonWithIcon: MUI <Button> with icon and label

<Button
  variant="${1|text,contained,outlined|}"
  color="${2|primary,secondary,inherit,success,error,info,warning|}"
  startIcon={$3}
  $4
>
  $5
</Button>

muiCardHeader: MUI <CardHeader>

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

muiCardMedia: MUI <CardMedia>

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

muiCheckboxLabel: MUI <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: MUI <Checkbox> with <FormControlLabel>

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: MUI <Container>

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

muiDialog: MUI <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={$10\}
      color="${11|primary,secondary,inherit,success,error,info,warning|}"
    >${12:
      Cancel}
    </Button>
  </DialogActions>}
</Dialog>

muiDialogSimple: MUI <Dialog>

<Dialog open={$1} onClose={$2} aria-labelledby="$3">
  $4
</Dialog>

muiDrawerPermanent: MUI permanent <Drawer>

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

muiDrawerPersistent: MUI persistent <Drawer>

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

muiDrawerTemporary: MUI temporary <Drawer>

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

muiEndAdornment: MUI end <InputAdornment>


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

muiFab: MUI <Fab>

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

muiFabExtended: MUI <Fab variant="extended">

<Fab variant="${1|circular,extended|}" color="${2|default,inherit,primary,secondary|}" size="${3|large,medium,small|}" aria-label="$4"$5>
  <Box marginRight={1}><$6Icon /></Box>
  $7
</Fab>

muiFormControl: MUI <FormControl>

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

muiFormControlGroup: MUI <FormControl> with <FormGroup>

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

muiGridContainer: MUI <Grid container>

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

muiGridContainerCenter: MUI <Grid container> with centering

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

muiGridContainerFull: MUI <Grid container> with all props

<Grid
  container${1:
  spacing={${2:1}\}}${3:
  direction="${4|row,row-reverse,column,column-reverse|}"}${5:
  justifyContent="${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|wrap,nowrap,wrap-reverse|}"}
  $13
>
  $14
</Grid>

muiIconButton: MUI <IconButton>

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

muiImageListSubheader: MUI <ImageList> subheader

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

muiImageListTilebar: MUI <ImageListTileBar>

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

muiMenu: MUI <Menu>

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

muiMenuItem: MUI <MenuItem>

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

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

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

muiRadioGroup: MUI <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: MUI <Radio> with <FormControlLabel>

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

muiRadioLabelPlacement: MUI <Radio> with <FormControlLabel> with labelPlacement

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

muiSelectItem: MUI <MenuItem> inside <Select>

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

muiSliderContinuous: MUI <Slider> with continuous values

Controlled

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

Uncontrolled

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

muiSliderDiscrete: MUI <Slider> with discrete values

Controlled

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

Uncontrolled

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

muiSnackbar: MUI <Snackbar>

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

muiSnackbarContent: MUI <SnackbarContent>

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

muiStartAdornment: MUI start <InputAdornment>


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

muiStep: MUI <Step>

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

muiStepContent: MUI <Step> with <StepContent>

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

muiStepOptional: MUI optional <Step>

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

muiStepper: MUI <Stepper>

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

muiSwipeableViews: MUI <SwipeableViews>

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

muiSwitch: MUI <Switch>

Controlled

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

Uncontrolled

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

muiSwitchLabel: MUI <Switch> with <FormControlLabel>

Controlled

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

Uncontrolled

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

muiSwitchLabelPlacement: MUI <Switch> with <FormControlLabel> with labelPlacement

Controlled

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

Uncontrolled

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

muiTabPanel: MUI <TabPanel>

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

muiTabs: MUI <Tabs>

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

muiTabsScrollable: MUI 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
  >
    $8
  </Tabs>
</AppBar>

muiTextField: MUI <TextField>

Controlled

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

Uncontrolled

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

muiTextFieldMore: MUI <TextField> with more props

Controlled

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

Uncontrolled

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

muiTextFieldSelect: MUI <TextField select>

Controlled

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

Uncontrolled

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

muiTextFieldVariant: MUI <TextField> with variant

Controlled

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

Uncontrolled

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

muiTooltip: MUI <Tooltip>

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

muiTypography: MUI <Typography>

<Typography variant="${1|body1,body2,button,caption,h1,h2,h3,h4,h5,h6,inherit,overline,subtitle1,subtitle2|}" ${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

31 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