Mui Component Generator

A generator for MUI components in ReactJS, to kickstart your customizable components.

Note

No need for npm install, just run and install via npx. THIS MIGHT REWRITE YOUR CHANGES!, make sure to commit before running this command.

Run Command

npx mui-component-generator

Command above will generate:

│── components/  
│   │── Accordion/
│   │   │── Accordion.tsx
│   │── AccordionActions/
│   │   │── AccordionActions.tsx
│   │── AccordionDetails/
│   │   │── AccordionDetails.tsx
│   │── AccordionSummary/
│   │   │── AccordionSummary.tsx
│   │── .../
│   └── index.tsx

Flags

--dir

• Generate files to specific directory: Don't forget the quotation marks "\directory".
• default: Current directory in terminal.

npx mui-component-generator --dir "D:\KR\New folder"

D/
│── KR/
│   │── New folder/
│   │   │── components/  
│   │   │   │── Accordion/
│   │   │   │── AccordionActions/
│   │   │   │── AccordionDetails/
│   │   │   │── .../
│   │   │   └── index.tsx

--styled

• Add styled components, see example below:

npx mui-component-generator --styled

import React from 'react';
import { styled, Button, ButtonProps } from '@mui/material';

type StyledButtonProps = ButtonProps;

export const StyledButton = styled(({ ...props }: StyledButtonProps) => (
<Button {...props} />
))(({ theme }) => ({}))

export const MuiButton: React.FC<MuiButtonProps> = (props) => <StyledButton {...props} />;

--prefix

• Modifies prefix to components' name, see example below:
• default: Mui

npx mui-component-generator --prefix "Rey"

import React from 'react';
import { Button, ButtonProps } from '@mui/material';

type ReyButtonProps = ButtonProps; // modifies the prefix of component type

export const ReyButton: React.FC<ReyButtonProps> = (props) => <Button {...props} />; // modifies the prefix of component name

--styled-prefix

• Modifies prefix to styled components' name and type, see example below:
• default: Styled
• required: [--styled]

npx mui-component-generator --styled --styled-prefix "Ken"

import React from 'react';
import { styled, Button, ButtonProps } from '@mui/material';

type KenButtonProps = ButtonProps; // modifies the prefix of styled component type

export const KenButton = styled(({ ...props }: KenButtonProps) => ( // modifies the prefix of styled component name
<Button {...props} />
))(({ theme }) => ({}))

export const MuiButton: React.FC<MuiButtonProps> = (props) => <KenButton {...props} />;

--memoized

• Wraps components in memo, see example below:

npx mui-component-generator --memoized

import React, { memo } from 'react';
import { Button, ButtonProps } from '@mui/material';

type MuiButtonProps = ButtonProps;

export const MuiButton: React.FC<MuiButtonProps> = memo((props) => <Button {...props} />);

--directive

• Adds directive at the top of the file, see example below: Don't forget the quotation marks "'use client;'".

npx mui-component-generator --directive "'use client';"

'use client'; // adds this part
import React from 'react';
import { Button, ButtonProps } from '@mui/material';

type MuiButtonProps = ButtonProps;

export const MuiButton: React.FC<MuiButtonProps> = (props) => <Button {...props} />;

--type-overrides

• Generates type declaration file overrides mui.d.ts, see example below:
• Only: [Color, Size, Variant] - depends whether a component supports such override/s.

npx mui-component-generator --type-overrides

import {} from '@mui/material/AvatarGroup';
declare module '@mui/material/AvatarGroup' {
  interface AvatarGroupPropsVariantOverrides { }
}

import {} from '@mui/material/Badge';
declare module '@mui/material/Badge' {
  interface BadgePropsColorOverrides { }
  interface BadgePropsVariantOverrides { }
}

import {} from '@mui/material/Button';
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides { }
  interface ButtonPropsSizeOverrides { }
  interface ButtonPropsVariantOverrides { }
}

...