CLI for generating React component files. To help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.
This tool create components with ts
npm install -g @rebase-agency/generate-react-cli
npx generate-react [options] <component> [path]
npx generate-react Box ./src/components
This command will create a folder with your component name in the specified path (e.g. src/components) directory, and its corresponding files.
|-- /src
|-- /components
|-- /Box
|-- Box.tsx
|-- Box.module.css
|-- index.ts
|-- /Box
|-- Box.tsx
|-- Box.module.css
|-- Docs.mdx
|-- Box.stories.tsx
|-- README.md
|-- index.ts
Options | Description |
---|---|
-s | Generate the component files for storybook project. |
-c | Generate the context files for project. |
-hk | Generate the hook file with default code. |
-nf | Generate only one React component (without export and css module files). |
-nc | Generate the React components without css module file. |
-i | Generate files for svg icon component. |
-p | Generate the React components with props types template. |
This command will create a index.ts
file with export yours components in the specified path (e.g. src/components) directory. The command overwrites the index.ts
file.
npx generate-react export ./src/components
For example, you have ./src/components
with the following component folders:
|-- /src
|-- /components
|-- /Box
|-- /Button
|-- /Card
|-- /Modal
Then the export
command will generate a file index.ts
with the following content:
export { Box } from "./Box";
export { Button } from "./Button";
export { Card } from "./Card";
export { Modal } from "./Modal";
@rebase-agency/generate-react-cli is an open source software licensed as MIT.