(Introduction article v1) 🛠WIP v2
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.
What you can do with this tool ?
$ npm install -g create-component-app
$ cd ~/my-projects $ create-component-app
connectfunction of redux
pathof the new component
Create-component-app uses cosmiconfig for configuration file support. This means you can configure cca via:
.ccarcfile, written in YAML or JSON, with optional extensions:
cca.config.jsfile that exports an object.
"cca"key in your
The configuration file will be resolved starting from the root of your project, and searching up the file tree until a config file is (or isn't) found.
An example configuration file can be found here: .ccarc.example, you can use this file by copying it to the root of your project.
Currently supported options are:
|Default type of the component |
|Default path to get the templates from the custom templates folder|
|Default path to create component file and folder|
|Default extension for your css file |
|Default flag to include a test file in the folder |
|Default flag to include a storybook file in the folder |
|Default flag to create an index file in the folder |
|Default flag to integrate connect redux in the index file |
|Only for "class" and "pure", insert method inside the component (i.e. |
|Choose the specific filename for your component's file. (COMPONENT_NAME will be replaced)|
|specify the file name of your test file|
|specify the component file name|
|specify the style file name !!IMPORTANT: Include cssExtension.|
1) Create a JSON file
2) 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 loaded by cosmiconfig
$ create-component-app --path path/destionation
Passing a param via the CLI overrides the configuration file loaded by cosmiconfig
Simple steps to create your own templates docs/custom-templates
Now, the first question that you receive is
Do you wanna choose a template? if you answer yes, you can see the list of templates from the community.
templatesDirPath- a custom path to the user custom templates folder.
templates- a list of used templates (with a default) to filter the list
create-component-app -t templateName
Now, the community can offer their templates! How?
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.
npm run watch while coding.
MIT © Christian Varisco