react-generate-comp

Generate React components in current execute directory by typing with CLI.

Works on Windows / MacOS / Linux.

> We are updating to V2 which supporting Typescript in default. If you are upgraded from V1, please be care that you do not have to use Typescript -t flag from now on. Instead of Javascript users, you have to apply the Javascript -j flag.

$3

1. Create a basic components with ts / js config.
2. Follow the practice of react official ts / js docs.
3. Generate Components / Slice / useState in one line.
4. No configs, easy to use with prompts.

$3

Recommended: Install with -g
`` bash
npm i -g react-generate-comp
`

Alternative: Use with npm exec directly
`bash


With CLI

npm exec react-generate-comp

Call With Args

npm exec react-generate-comp -- -c HelloComp
`

$3

` bash
Generate Component
rgc -c
rgc -c

-j, --javascript For enable javascript jsx generate

-n, --native For generate react native components

-c, --components for Generate comp name

-u, --useState Generate useState line code to your clipboard

-e, --useEffect Generate useEffect code to your clipboard

Usage:
Create a TSX components named "HelloComp" for React
rgc -c helloComp

Create two TSX components named "HelloComp" and "ByeComp" for React
rgc -c helloComp ByeComp

Create a JSX components named "Yolocomp" for React
rgc -j -c yolocomp

Create a TSX components named "HelloComp" for React native
rgc -n -c helloComp

Create a jsx components named "Yolocomp" for React native
rgc -j -n -c yolocomp

Create a useState named with "[ number, setNumber ]"
rgc -u number

Create a set of folder and file for init the new Vite / CRP project
rgc -i

Create useEffect code
rgc -e

`

🖼️ Generated Template


`rgc -t -c "testComp"`
Template

`rgc -c "hiComp"`
Template

`rgc -t -s "todo"`
Template

`rgc -s "todo"`
Template

🗺️ Road Map

- ✅ First class typescript support
- ✅ Generate other related stuff
- ⬜️ Init more template

📝 Dev Logs

$3

1. Add react useEffect generate -e flag

$3

1. Default generating .tsx, .ts for all related files.
2. Remove RTK Slice generation.
3. Allow to create more than one componnents with same command.
4. Better UX for reminder.

$3

1. Add react native component generate -n flag

$3

1. Add zustand template to rgc --init

$3

1. Cli -c, -s will not overwrite file that already exist in the current path.

$3

1. init project javascript will not generate interface folder from now.

$3

1. Added rgc --init prompt features.
2. Added RTK generate in init project features.

$3

1. Fixing bug on prompt cancel issues.
2. Fixing RTKSlice Ts spacing issues.
3. Better reminder prompt.
4. Added rgc --init functions for init project folder data.

$3

1. Updated generate log syntax.
2. Now typing rgc will active a prompts interface to select regarding generate stuff.
3. Color log improvement.

$3

1. Added rgc -u ` generate function.

🚗 License

MIT