Latest commit 1d43a53 Aug 3, 2017 @CVarisco committed on GitHub Merge pull request #28 from nealoke/master
Fixed issue where extension was included again for custom templates


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