JavaScript
Latest commit c1f76ec Jul 21, 2017 @CVarisco new version v0.7.0

README.md

create-component-app

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.
| vscode extension |

What you can do with this tool ?


create-component-app

Install

$ npm install -g create-component-app

Usage

$ 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": ["componentDidMount", "shouldComponentUpdate", "onClick"]
}

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"]
}
  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

Contributing

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.

License

MIT © Christian Varisco