Simple cli that helps to create react components faster

Usage:

Enter: create-component %component_name% (or cc %component_name%)

By default, will create jsx and css module file in your project src/components directory.

for example:

create-component Header

In your path/to/project/src/components will appear index.jsx and Header.module.css, these files contains default react component structure.

Also, you can add config file to set default flags.

In your root project directory create ".kclioptions.js" file, it should export object that contains config settings.

Btw you can't use any flags while config file exists in you root project folder (except -f and -n flags).

Config settings example:

All config settings (true or false):

 addCssExt: Use css extension to create style module file.
 addScssExt: Use scss extension to create style module file.
 setJsx: Use js to create main component file.
 setTsx: Use ts to create main component file.
 useProps: Include props interface into main component file.
 noIndex: Disable index file in main components directory.
 useClassNames: Include classnames import into your main component file.

If you don't want to use config file, just use flags instead.

All flags:

"--css" or "-c" - Use css extension to create style module. (By default)
"--scss" or "-s" - Use scss extension to create style module.
"--js" or "-j" - Use JSX to create component file. (By default)
"--ts" or "-t" - Use TSX to create component file.
"--props" or "-p" - Include props interface into component file. (Can be used only with TSX)
"--no-index" or "-n" - Disable index file in main components' directory that contains more comfortable imports and exports for your components.
"--folder=%NAME%" or "-f %NAME%" - Add nested folder to your components' directory.
"--use-cn" or "-ucn" - Include classnames import into your main component file.

For example:

create-component Button -f UI

Result: path/to/your/project/src/components/UI/Button/...

Links:

GitHub Repository

Npm package