scaf-it v1.0.2

scaf-it - React Component Scaffolder

A simple CLI tool to scaffold React components with optional styles and configuration.

Features

• Quickly generate React component boilerplates.
• Choose between SCSS or CSS for styling.
• Optionally skip generating an index.js file.
• Define a custom location for scaffolding components.

Installation

To use scaf-it globally, install it via npm:

npm install -g scaf-it

You can now use the scaf-it command globally.

Usage

The scaf-it CLI helps scaffold React components. Below are the usage details and examples.

Basic Usage

scaf-it <ComponentName> [Location] [--no-index] [--css]

Arguments

Options

Examples

1. Default Behavior

scaf-it MyComponent

Scaffolds a React component named MyComponent in src/components with:

• MyComponent.jsx
• MyComponent.scss
• index.js

2. Custom Location

You can add a custom location by providing a path local to the project of your choosing.

scaf-it MyComponent src/custom/path

Scaffolds MyComponent in src/custom/path in the CWD.

3. Skip index.js

scaf-it MyComponent --no-index

Scaffolds the component without generating an index.js file.

4. Use CSS for Styling

scaf-it MyComponent --css

Scaffolds the component with MyComponent.css instead of MyComponent.scss.

5. Combine Options

scaf-it MyComponent src/custom/path --no-index --css

Scaffolds the component in src/custom/path without index.js and uses CSS for styling.

Output Example

When you scaffold a component, the following structure is generated:

src/components/MyComponent/
├── MyComponent.jsx
├── MyComponent.scss (or .css)
└── index.js (optional)

Help Command

For a quick overview of usage, run:

scaf-it

This displays detailed usage instructions in the terminal.

Development

If you'd like to contribute or modify the tool:

1. Clone the repository:

   git clone https://github.com/nicholas-hucal/scaf-it-cli.git

2. Navigate to the project directory:

   cd scaf-it

3. Link the CLI tool globally:

   npm link

4. Test the tool locally:

   node index.js <ComponentName> [Location] [--no-index] [--css]

5. If making changes, be sure to test thoroughly!

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you'd like to improve the tool.

Support

If you encounter any issues or have questions, feel free to reach out by opening an issue in the repository.

Enjoy faster React component scaffolding! 🚀