react-cli-rlc v1.0.4
Simple CLI for generating react components like Angular CLI does
How to install
It's easy, just run npm i react-cli-rlc
Usage
Navigate to the directory in your project where you need to create a component.
Then type command in the terminal rlc -g -c myTest
. This command will generate:
- Folder - named
MyTest
. Every passed name wil be capitalized. - File with component - named
MyTestComponent.js
. Programm adds wordComponent
to original name and sets with deafult file extensionjs
. - File with styles - named
MyTestComponent.module.css
. Programm add wordComponent
to original name + concatenates prefixmodule
. Thus you may write your styles that won't override each other. - File with reexport - named
index.js
which serves for reexporting files from your component making imports to other files more beautiful.
Also, file with component will contain some template code as well as index file.
Commands
rlc
- name of package. Works the same asnode
ornpm
.--generate
- tells programm what should be generated. For now it's a components only, so after--generate
or-g
there should be flag--component
or-c
and component name right after it<component name>
.--component <component name>
or-g -c <component name>
- generates folder and files with the passed name: file with functional React component, index file for reexport and file with styles, e.g--genarate --component test
or-g -c <component name>
will create : folderTest
=>TestComponent.js
=>TestComponent.module.scss
=>index.js
.
--extension <file extension>
or-ext <file extension>
- sets the extensions of component file. Thus you can make your component injs
,jsx
,ts
,tsx
. By defaultjs
extension is applied. Also, if you setjsx
ortsx
extension of index file will remainjs
orts
nevertheless.
--skip <option>
or-s <option>
- allows not to render some files or folder.Options:
reexport
- skips index file with reexport, e.g--skip reexport
or-s reexport
.styles
- skips file with styles, e.g--skip styles
or-s styles
.dir
- skips parent dirirectory and generates files only, e.g--skip dir
or-s dir
. By default all three files and parent directory are generated.
Also you may pass several options to skip several files, e.g --skip dir styles reexport
. In this case only one file with a react component wil be created.
--template <component type>
or-T <component type
- allows to generate file with template of functional or class component. Typesfunc
orclass
are accepted, e.g--template class
or-T class
. Functional component templatefunc
is default.--styles <styles format>
or-S <styles format>
- here you can pick up your prefered way of styling components.Options:
css
- creates file with css extension, e.g--styles css
or-S css
.scss
- creates file with scss extension, e.g--styles scss
or-S scss
.styled
- creates file with js extension and prefix styled, like TestComponent.styled.js in order to allow you to work withstyled-component
library or@emotion
, e.g--styles styled
or-S styled
. CSS styles formatcss
is default.