@akliegman/component-generator
v0.0.4
Published
A CLI tool to generate React components with TypeScript and SCSS
Downloads
5
Maintainers
Readme
@akliegman/component-generator
A CLI tool to generate React components with TypeScript, SCSS/CSS/LESS stylesheets, customizable prop types, and Prettier formatting.
Installation
Global Installation
To install the package globally, run:
npm install -g @akliegman/component-generator
Local Installation
To install the package as a dev dependency in a project, run:
npm install --save-dev @akliegman/component-generator
Usage
After installation, you can use the generate-component
command to generate a new component.
Command Syntax
generate-component -n <ComponentName> [-p <props>] [-pt <propTypes>] [-t <targetDirectory>] [--htmlTag <htmlTag>] [--skipStyles] [--styleType <styleType>] [--componentType <componentType>] [--printReactImportStatement]
Options
- -n, --name (required): The name of the component.
- -f, --format: The format of the files, either named (e.g. ComponentName.tsx and ComponentName.module.scss) or default (e.g. index.tsx or styles.module.scss)'.
- -p, --props: Comma-separated list of prop names for the component.
- -t, --target: The target directory where the component will be created. Default is src/components.
- --htmlTag, --html: HTML tag for the component (default: "div").
- --componentType, --ct: Type of component to generate (const, function).
- --printReactImportStatement: Print the import statement for React.
- --propTypes, --pt: Comma-separated list of prop types for the component. Must match the order of the props.
- --styleCase, --sc: Naming convention for the stylesheet (camel, kebab, snake, default - same a function name).
- --skipStyles, --ss: Skip generating/importing styles.
- --styleType, --st: Type of stylesheet to generate (css, scss, less).
- -h, --help: View help message.
Examples
Generating a Component with Props and Prop Types
generate-component -n MyComponent -p "children,className" -pt "React.ReactNode|string,string" -t "src/custom-components" -f "named"
This command will create a MyComponent
directory inside src/custom-components
with the following files:
MyComponent.tsx
MyComponent.module.scss
MyComponent.d.ts
Development
Running Locally
If you want to run the generator script locally without installing it globally, you can use:
node index.js --n <ComponentName> [-p <props>] [-pt <propTypes>] [-t <targetDirectory>] [--htmlTag <htmlTag>] [--skipStyles] [--styleType <styleType>] [--componentType <componentType>] [--printReactImportStatement]
Prettier
This tool uses Prettier to format the generated files. Ensure you have a .prettierrc
file in the root of your project to define your Prettier configuration.
Contributing
Contributions are welcome! Please open an issue or submit a pull request.
License
This project is licensed under the MIT License. See the LICENSE file for more details.