Latest commit b11bb38 Oct 13, 2017 @CVarisco CVarisco Update


npm version Code Climate npm Build Status

How much time do you spend copying and pasting the component folder to create a new one ?
This is a tool to generate different types of React components from the terminal.

Available extension

What you can do with this tool ?



$ npm install -g create-component-app


$ cd ~/my-projects
$ create-component-app

Create your components guided from terminal with a lot of choices

  • Create different kind of components:
    • stateless
    • class
    • pure
    • custom
  • Set name of the new component
  • Integrate connect function of redux
  • Include an index file
  • Set a different component extension
    • js
    • jsx
  • Set a different style extension
    • css
    • scss
    • sass
    • less
  • Include a storybook file
  • Include a test file (with enzyme)
  • Set the destionation path of the new component

You can create a configuration file in your current project directory

Create a file in your project folder named .ccarc:

    "type": "class",
    "path": "./src/components",
    "jsExtension": "js",
    "cssExtension": "scss",
    "includeTests": false,
    "includeStories": false,
    "indexFile": false,
    "connected": false,
    "componentMethods": [
    "fileNames": {
        "testFileMatch": "spec",
        "testFileName": "myTest",
        "componentFileName": "template",
        "styleFileName": "style"

You can also pass a config file

  1. Create a JSON file config.json:
    // Default type of component ["stateless", "class", "pure"]
    "type": "stateless",

    // Default path to create component file and folder
    "path": "./src/components",

    // Default extension for your javascript file ["js", "jsx"]
    "jsExtension": "js",

    // Default extension for your css file ["css", "scss", "sass", "less", false]
    // Set to false if you don't want a style file
    "cssExtension": "css",

    // Default flag to include a test file in the folder [true, false]
    "includeTests": true,

    // Default flag to include a storybook file in the folder [true, false]
    "includeStories": true,

    // Default flag to create an index file in the folder [false, true]
    "indexFile": false,

    // Default flag to integrate connect redux in the index file [false, true]
    "connected": false,

    // Only for "class" and "pure", insert method inside the component
    "componentMethods": ["componentDidMount", "shouldComponentUpdate", "onClick"],

    // Choose the specific filename for your component's file.
    "fileNames": {
        "testFileMatch": "spec", // specify the match part of test file
        "testFileName": "myTest", // specify the file name of your test file
        "componentFileName": "template", // specify the component file name
        "styleFileName": "style" // specify the style file name !!IMPORTANT: Include cssExtension.
  1. and pass the path to config param
$ create-component-app --config path/to/your/config.json

Passing a config file via the CLI overrides the configuration file in the working directory

You can use your own custom templates

Simple steps to create your own templates docs/custom-templates


Check the issue list to contribute on some activities or to advice new features! The library is open to everybody, contribute improve your skills.

create-component-app is maintained under the Semantic Versioning guidelines.

Use npm run watch while coding.


MIT © Christian Varisco