React Component Generator

Generate React components:

• src
  • /components
    • /NewComponent
      • index.ts|.js
      • NewComponent.css|.scss|.module.css|.module.scss
      • NewComponent.ts|.js
      • /tests
        • NewComponent.test.ts|.js

Features

Right click on a folder in the explorer and click Generate React component to scaffold out a new React component with all the files you need. Or choose Generate React component from Command Palette while in an Active Editor.

Using Component Templates

If you are not happy with the default component template, you can bring your own using the reactComponentGenerator.componentTemplate in your settings.

Consider following example component template:

"reactComponentGenerator.componentTemplate": [
    "import React from 'react';",
    "",
    "import styles from './${componentName}.${stylesLanguage}';",
    "",
    "type Props = {",
    "  //",
    "}",
    "",
    "export function ${componentName}(props: Props) {",
    "  return (<div className={styles.container}></div>)",
    "}"
  ]

This would generate components like this:

import React from "react";

import styles from "./SuperCoolComponent.module.scss";

type Props = {
  //
};

export function SuperCoolComponent(props: Props) {
  return <div className={styles.container}></div>;
}

Settings

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Hans 💻 📖 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!