Skip to content

Latest commit

 

History

History
117 lines (84 loc) · 3.81 KB

README.md

File metadata and controls

117 lines (84 loc) · 3.81 KB
Raw

Generate component for React

Marketplace Version Installs Rating

This extension generates a component and style for the given component name.

About

This extension the component with the given name, generates a test file with the testing-library react library and the style that we can choose from 3 possibilities:

Usage

Step 1:

  • After the extension is installed, press the Ctrl+Shift+P or Cmd+Shift+P key combination to open the command palette.
  • Type generate component and press Enter to generate a component.

Step 2:

  • Type the component name and press Enter.

Step 3:

  • Choose the folder where you want to generate the component or choose path default (src/components).
  • Warning: Option Default folder is not available. Will soon be available!.

Step 4:

  • Choose the style library you want to use.
  • Choose between Material-UI or Styled-Components or Style without library or Without style.

Step 5:

  • Choose if you want to generate interface for the component.
  • Choose between Yes or No.

Step 6:

  • Choose file name format.
  • Available formats: KebabCase and PascalCase.
  • Example with KebabCase:
    • button-submit-styles.ts
    • button-submit.spec.tsx
    • button-submit.tsx
    • index.ts
  • Example with PascalCase:
    • ButtonSubmit-styles.ts
    • ButtonSubmit.spec.tsx
    • ButtonSubmit.tsx
    • index.ts

Result:

  • Ps. All the files that are generated, contain the start code in each one.

About the files

  • button-styles.ts: Style file for the component.
  • button.spec.tsx: Test file for the component with the testing-library react.
  • button.tsx: Component file for the component.
  • index.ts: Index file for export the component.

Requirements

If you want to use the style library Material-UI, you need to install the @material-ui/core package.

npm install @material-ui/core

If you want to use the style library Styled-Components, you need to install the styled-components package.

npm install styled-components

If you want to use the test library testing-library react, you need to install the @testing-library/react package.

npm install @testing-library/react

Contributors

License

This project is under the MIT license. See the LICENSE file for more details.