Quick Component Creator

Quickly create React, Vue, Angular, Svelte components with your own templates

1. Create qcc.schema.js

module.exports = [
  {
    type: 'React component',
    files: [
      {
        path: ({ name, helpers: { changeCase } }) => changeCase.paramCase(name) + '.jsx',
        template: ({ name, helpers: { wrapInTemplateLiteral, changeCase } }) => `
        import React from 'react';
        import styles from './${changeCase.paramCase(name)}.css';

        export default function ${changeCase.pascalCase(name)}() {
          return (
            <div className={${wrapInTemplateLiteral('styles.wrapper')}}>
             ${name}
            </div>
          );
        }
          `,
      },
      {
        path: ({ name, helpers: { changeCase } }) => changeCase.paramCase(name) + '.css',
        template: () => `.wrapper {}`,
      },
    ],
  },
]

2. Click right button in mouse and selected Create Component
3. Pick component type
4. Add component names
5. Profit! ✨

run Developer: Reload Window after making changes to your qcc.schema.js file to update output

Creates the following component when selecting type React component and inputting name button

button.jsx

import React from 'react'
import styles from './button.css'

export default function Button() {
  return <div className={`${styles.wrapper}`}>button</div>
}

button.css

.wrapper {
}

Options

createNamedFolder - default true

Creates files inside a folder named based on the component name

Hooks

onCreate

Trigger function after component is created.

const shell = require('child_process')

module.exports = [
  {
    type: 'React component',
    hooks: {
      onCreate: ({ outputPath }) => {
        shell.exec(`cd ${outputPath}`)
      },
    },
    files: [
      {
        path: () => 'src/index.jsx',
        template: ({ name, helpers: { changeCase } }) => `
        import React from 'react';
        
        export default function ${changeCase.pascalCase(name)}() {
          return <div>${changeCase.pascalCase(name)}</div>
        }
          `,
      },
    ],
  },
]

Component Type properties

Properties passed to path and template functions

name: 'component name input by user',
folderPath: 'component folder path',
helpers: {
  changeCase: 'function to change case of a string',
  wrapInTemplateLiteral: 'helps add templates literals within a template literal'
  addEmptyTemplateLiteral: 'returns ``'
}

Change case uses the change-case library

NOTE: Restart VSCode after editing qcc.schema.js

Pro Tip: Add a prettier config file path to format your created files.