https://github.com/vscodeshift/mui-snippets

Code snippets for MUI
https://github.com/vscodeshift/mui-snippets

material-ui snippets vscode

Last synced: 10 months ago
JSON representation

Code snippets for MUI

• Host: GitHub
• URL: https://github.com/vscodeshift/mui-snippets
• Owner: vscodeshift
• License: mit
• Created: 2021-09-29T05:13:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-24T08:37:12.000Z (almost 4 years ago)
• Last Synced: 2023-03-06T12:17:14.518Z (over 3 years ago)
• Topics: material-ui, snippets, vscode
• Language: TypeScript
• Size: 2.21 MB
• Stars: 25
• Watchers: 1
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Snippets for MUI

![demo](/docs/snippet.gif?raw=true)

[![CircleCI](https://circleci.com/gh/vscodeshift/mui-snippets.svg?style=svg)](https://circleci.com/gh/vscodeshift/mui-snippets)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.mui-snippets)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.mui-snippets)

**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 ` (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`](https://github.com/vscodeshift/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>](#muiaccordion-mui-accordion)

- [`muiAccordionControlled`: MUI controlled <Accordion>](#muiaccordioncontrolled-mui-controlled-accordion)

- [`muiAppBar`: MUI <AppBar>](#muiappbar-mui-appbar)

- [`muiAppBarMenu`: MUI <AppBar> with menu icon](#muiappbarmenu-mui-appbar-with-menu-icon)

- [`muiBottomNavigation`: MUI <BottomNavigation>](#muibottomnavigation-mui-bottomnavigation)

- [`muiBottomNavigationAction`: MUI <BottomNavigationAction>](#muibottomnavigationaction-mui-bottomnavigationaction)

- [`muiButton`: MUI <Button>](#muibutton-mui-button)

- [`muiButtonGroup`: MUI <ButtonGroup>](#muibuttongroup-mui-buttongroup)

- [`muiButtonGroupSize`: MUI <ButtonGroup> with size](#muibuttongroupsize-mui-buttongroup-with-size)

- [`muiButtonGroupVertical`: MUI vertical <ButtonGroup>](#muibuttongroupvertical-mui-vertical-buttongroup)

- [`muiButtonSize`: MUI <Button> with size](#muibuttonsize-mui-button-with-size)

- [`muiButtonText`: MUI text <Button>](#muibuttontext-mui-text-button)

- [`muiButtonWithIcon`: MUI <Button> with icon and label](#muibuttonwithicon-mui-button-with-icon-and-label)

- [`muiCardHeader`: MUI <CardHeader>](#muicardheader-mui-cardheader)

- [`muiCardMedia`: MUI <CardMedia>](#muicardmedia-mui-cardmedia)

- [`muiCheckboxLabel`: MUI <Checkbox> with <FormControlLabel>](#muicheckboxlabel-mui-checkbox-with-formcontrollabel)

- [`muiCheckboxLabelPlacement`: MUI <Checkbox> with <FormControlLabel>](#muicheckboxlabelplacement-mui-checkbox-with-formcontrollabel)

- [`muiContainer`: MUI <Container>](#muicontainer-mui-container)

- [`muiDialog`: MUI <Dialog>](#muidialog-mui-dialog)

- [`muiDialogSimple`: MUI <Dialog>](#muidialogsimple-mui-dialog)

- [`muiDrawerPermanent`: MUI permanent <Drawer>](#muidrawerpermanent-mui-permanent-drawer)

- [`muiDrawerPersistent`: MUI persistent <Drawer>](#muidrawerpersistent-mui-persistent-drawer)

- [`muiDrawerTemporary`: MUI temporary <Drawer>](#muidrawertemporary-mui-temporary-drawer)

- [`muiEndAdornment`: MUI end <InputAdornment>](#muiendadornment-mui-end-inputadornment)

- [`muiFab`: MUI <Fab>](#muifab-mui-fab)

- [`muiFabExtended`: MUI <Fab variant="extended">](#muifabextended-mui-fab-variantextended)

- [`muiFormControl`: MUI <FormControl>](#muiformcontrol-mui-formcontrol)

- [`muiFormControlGroup`: MUI <FormControl> with <FormGroup>](#muiformcontrolgroup-mui-formcontrol-with-formgroup)

- [`muiGridContainer`: MUI <Grid container>](#muigridcontainer-mui-grid-container)

- [`muiGridContainerCenter`: MUI <Grid container> with centering](#muigridcontainercenter-mui-grid-container-with-centering)

- [`muiGridContainerFull`: MUI <Grid container> with all props](#muigridcontainerfull-mui-grid-container-with-all-props)

- [`muiIconButton`: MUI <IconButton>](#muiiconbutton-mui-iconbutton)

- [`muiImageListSubheader`: MUI <ImageList> subheader](#muiimagelistsubheader-mui-imagelist-subheader)

- [`muiImageListTilebar`: MUI <ImageListTileBar>](#muiimagelisttilebar-mui-imagelisttilebar)

- [`muiMenu`: MUI <Menu>](#muimenu-mui-menu)

- [`muiMenuItem`: MUI <MenuItem>](#muimenuitem-mui-menuitem)

- [`muiMenuPopupState`: MUI <Menu> for material-ui-popup-state](#muimenupopupstate-mui-menu-for-material-ui-popup-state)

- [`muiRadioGroup`: MUI <FormControl> with <RadioGroup>](#muiradiogroup-mui-formcontrol-with-radiogroup)

- [`muiRadioLabel`: MUI <Radio> with <FormControlLabel>](#muiradiolabel-mui-radio-with-formcontrollabel)

- [`muiRadioLabelPlacement`: MUI <Radio> with <FormControlLabel> with labelPlacement](#muiradiolabelplacement-mui-radio-with-formcontrollabel-with-labelplacement)

- [`muiSelectItem`: MUI <MenuItem> inside <Select>](#muiselectitem-mui-menuitem-inside-select)

- [`muiSliderContinuous`: MUI <Slider> with continuous values](#muislidercontinuous-mui-slider-with-continuous-values)

- [`muiSliderDiscrete`: MUI <Slider> with discrete values](#muisliderdiscrete-mui-slider-with-discrete-values)

- [`muiSnackbar`: MUI <Snackbar>](#muisnackbar-mui-snackbar)

- [`muiSnackbarContent`: MUI <SnackbarContent>](#muisnackbarcontent-mui-snackbarcontent)

- [`muiStartAdornment`: MUI start <InputAdornment>](#muistartadornment-mui-start-inputadornment)

- [`muiStep`: MUI <Step>](#muistep-mui-step)

- [`muiStepContent`: MUI <Step> with <StepContent>](#muistepcontent-mui-step-with-stepcontent)

- [`muiStepOptional`: MUI optional <Step>](#muistepoptional-mui-optional-step)

- [`muiStepper`: MUI <Stepper>](#muistepper-mui-stepper)

- [`muiSwipeableViews`: MUI <SwipeableViews>](#muiswipeableviews-mui-swipeableviews)

- [`muiSwitch`: MUI <Switch>](#muiswitch-mui-switch)

- [`muiSwitchLabel`: MUI <Switch> with <FormControlLabel>](#muiswitchlabel-mui-switch-with-formcontrollabel)

- [`muiSwitchLabelPlacement`: MUI <Switch> with <FormControlLabel> with labelPlacement](#muiswitchlabelplacement-mui-switch-with-formcontrollabel-with-labelplacement)

- [`muiTabPanel`: MUI <TabPanel>](#muitabpanel-mui-tabpanel)

- [`muiTabs`: MUI <Tabs>](#muitabs-mui-tabs)

- [`muiTabsScrollable`: MUI scrollable <Tabs>](#muitabsscrollable-mui-scrollable-tabs)

- [`muiTextField`: MUI <TextField>](#muitextfield-mui-textfield)

- [`muiTextFieldMore`: MUI <TextField> with more props](#muitextfieldmore-mui-textfield-with-more-props)

- [`muiTextFieldSelect`: MUI <TextField select>](#muitextfieldselect-mui-textfield-select)

- [`muiTextFieldVariant`: MUI <TextField> with variant](#muitextfieldvariant-mui-textfield-with-variant)

- [`muiTooltip`: MUI <Tooltip>](#muitooltip-mui-tooltip)

- [`muiTypography`: MUI <Typography>](#muitypography-mui-typography)

### `muiAccordion`: MUI <Accordion>

```

  }

    aria-label="${1:Expand}"

    aria-controls="$2-content"

    id="$2-header"

  >

    $4

  

  $5

```

### `muiAccordionControlled`: MUI controlled <Accordion>

```

  }

    aria-label="${3:Expand}"

    aria-controls="$4-content"

    id="$4-header"

  >

    $6

  

  $7

```

### `muiAppBar`: MUI <AppBar>

```

  

    

      $5

    

  

```

### `muiAppBarMenu`: MUI <AppBar> with menu icon

```

  

    

      

    

    

      $5

    

  

```

### `muiBottomNavigation`: MUI <BottomNavigation>

```

  $4

```

### `muiBottomNavigationAction`: MUI <BottomNavigationAction>

```

```

### `muiButton`: MUI <Button>

```

  $4

```

### `muiButtonGroup`: MUI <ButtonGroup>

```

  $5

  $6

  $7

```

### `muiButtonGroupSize`: MUI <ButtonGroup> with size

```

  $6

  $7

  $8

```

### `muiButtonGroupVertical`: MUI vertical <ButtonGroup>

```

  $5

  $6

  $7

```

### `muiButtonSize`: MUI <Button> with size

```

  $5

```

### `muiButtonText`: MUI text <Button>

```

  $3

```

### `muiButtonWithIcon`: MUI <Button> with icon and label

```

  $5

```

### `muiCardHeader`: MUI <CardHeader>

```

      $4

    

  \}}${5:

  action={

    

      $8

    

  \}}${9:

  title="$10"}${11:

  subheader="$12"}

  $13

/>

```

### `muiCardMedia`: MUI <CardMedia>

```

```

### `muiCheckboxLabel`: MUI <Checkbox> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiCheckboxLabelPlacement`: MUI <Checkbox> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiContainer`: MUI <Container>

```

  $3

```

### `muiDialog`: MUI <Dialog>

```

${4:

  

    $5

  }${6:

  ${7:

    

      $8

    }

  }${9:

  

    ${12:

      Cancel}

    

  }

```

### `muiDialogSimple`: MUI <Dialog>

```

  $4

```

### `muiDrawerPermanent`: MUI permanent <Drawer>

```

  $3

```

### `muiDrawerPersistent`: MUI persistent <Drawer>

```

  $4

```

### `muiDrawerTemporary`: MUI temporary <Drawer>

```

  $5

```

### `muiEndAdornment`: MUI end <InputAdornment>

```

endAdornment={

  

    $0

  

}

```

### `muiFab`: MUI <Fab>

```

  <$4Icon />

```

### `muiFabExtended`: MUI <Fab variant="extended">

```

  <$6Icon />

  $7

```

### `muiFormControl`: MUI <FormControl>

```

  $2

  $0

  $3

```

### `muiFormControlGroup`: MUI <FormControl> with <FormGroup>

```

  $4

  

    $0

  

  $5

```

### `muiGridContainer`: MUI <Grid container>

```

  $3

```

### `muiGridContainerCenter`: MUI <Grid container> with centering

```

  $10

```

### `muiGridContainerFull`: MUI <Grid container> with all props

```

  $14

```

### `muiIconButton`: MUI <IconButton>

```

  $4

```

### `muiImageListSubheader`: MUI <ImageList> subheader

```

  $2

```

### `muiImageListTilebar`: MUI <ImageListTileBar>

```

      $8

    

  \}}

/>

```

### `muiMenu`: MUI <Menu>

```

  $5

```

### `muiMenuItem`: MUI <MenuItem>

```

$3

```

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

```

  $4

```

### `muiRadioGroup`: MUI <FormControl> with <RadioGroup>

```

  $4

  $0

  $9

```

### `muiRadioLabel`: MUI <Radio> with <FormControlLabel>

```

} />

```

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

```

}

/>

```

### `muiSelectItem`: MUI <MenuItem> inside <Select>

```

$3

```

### `muiSliderContinuous`: MUI <Slider> with continuous values

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSliderDiscrete`: MUI <Slider> with discrete values

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSnackbar`: MUI <Snackbar>

```

      

    

  \}}

/>

```

### `muiSnackbarContent`: MUI <SnackbarContent>

```

```

### `muiStartAdornment`: MUI start <InputAdornment>

```

startAdornment={

  

    $0

  

}

```

### `muiStep`: MUI <Step>

```

  $4

```

### `muiStepContent`: MUI <Step> with <StepContent>

```

  $4

  

    $5

  

```

### `muiStepOptional`: MUI optional <Step>

```

  ${4:Optional}}

  >

    $5

  

```

### `muiStepper`: MUI <Stepper>

```

  $2

```

### `muiSwipeableViews`: MUI <SwipeableViews>

```

  $0

```

### `muiSwitch`: MUI <Switch>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSwitchLabel`: MUI <Switch> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

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

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiTabPanel`: MUI <TabPanel>

```

  $5

```

### `muiTabs`: MUI <Tabs>

```

  

    $7

  

```

### `muiTabsScrollable`: MUI scrollable <Tabs>

```

  

    $8

  

```

### `muiTextField`: MUI <TextField>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldMore`: MUI <TextField> with more props

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldSelect`: MUI <TextField select>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldVariant`: MUI <TextField> with variant

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTooltip`: MUI <Tooltip>

```

  $TM_SELECTED_TEXT$0

```

### `muiTypography`: MUI <Typography>

```

$TM_SELECTED_TEXT$0

```