https://github.com/codingcodax/new-comp
An awesome CLI utility for quickly create new React components.
https://github.com/codingcodax/new-comp
cli new-component node
Last synced: about 1 month ago
JSON representation
An awesome CLI utility for quickly create new React components.
- Host: GitHub
- URL: https://github.com/codingcodax/new-comp
- Owner: codingcodax
- Created: 2023-01-27T01:44:14.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-15T19:42:24.000Z (over 1 year ago)
- Last Synced: 2025-02-17T01:32:11.628Z (10 months ago)
- Topics: cli, new-component, node
- Language: TypeScript
- Homepage:
- Size: 192 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
new-comp
An awesome CLI utility for quickly create new React components.
NMP Package
Feature Request
·
Bug Report
## Features
- Create React components.
- Choose between TypeScript and JavaScript.
- Components can be function, arrow or class.
- Even you can use your favorite ui library (personal whim).
## Quickstart
From your terminal run:
```bash
# install the package with NPM
$ npx n-comp
# or install it with YARN
$ yarn n-comp
```
`cd` into your project's directory, and try creating a new component:]
```bash
$ new-component MyNewComponent
```
Your project will now have a new directory at `src/components/MyNewComponent`. This directory has two files:
```javascript
// `MyNewComponent/index.js`
export { default } from './MyNewComponent';
```
```javascript
// `MyNewComponent/MyNewComponent.js`
function MyNewComponent() {
return (
MyNewComponent
);
}
export default MyNewComponent;
```
These files will be formatted according to your Prettier configuration.
## Configuration
Configuration can be done through 3 different ways:
- Creating a global `.nc.config.json` in your home directory (`~/.nc.config.json`).
- Creating a local `.nc.config.json` in your project's root directory.
- Command-line arguments.
The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.
## API Reference
### Language
Controls which language, JavaScript or TypeScript, should be used.
- `ts` — creates a `.tsx` file (default).
- `js` — creates a `.js` file.
**Usage:**
Command line: `--lang ` or `-l `
JSON config: `{ "lang": }`
### Type
Controls which type of component, function, arrow or class should be used.
- Function — use `function MyNewComponent() {}`
- Arrow — use `const MyNewComponent = () => {}`
- Class — use `class MyNewComponent extends React.Component {}`
**Usage:**
Command line: `--type ` or `-t `
JSON config: `{ "type": }`
### UI Library
Controls which ui library, vanilla, Chakra UI or MUI should be used.
- Vanilla — use `
` and `` tags.
- Chakra UI — use `` and `` components.
- Material UI — use `` and `` components.
**Usage:**
Command line: `--ui `
JSON config: `{ "ui": }`
### Directory
Controls the desired directory for the created component. Defaults to `src/components`
**Usage:**
Command line: `--dir ` or `-d `
JSON config: `{ "dir": }`
## License
Licensed under the [MIT license](./LICENSE.md)