Create-react-js-component-cli NPM

create-react-component

A simple CLI tool to create react components with a single command.

Note:

You should install Node.js first.
This tool is only for React.js projects.
You shoudl install this tool globally by adding -g flag.

Installation

npm i create-react-js-component-cli -g

Options:

You can run the following command to see the available options:

crc --help

The tool will show you the following options:

Options:
  --version  Show version number                                       [boolean]
  --name     The name of the component                                  [string]
  --path     The path to the component directory                        [string]
  --js       Use JavaScript file extesnion            [boolean] [default: false]
  --ts       Use TypeScript file extension            [boolean] [default: false]
  --css      Whether to use a CSS file                [boolean] [default: false]
  --scss     Whether to use a SCSS file               [boolean] [default: false]
  --test     Whether to include a test file           [boolean] [default: false]
  --help     Show help                                                 [boolean]

Usage:

There are 2 ways to use this tool:

The first way:

The first way is to run the following command and follow the instructions:
```
crc
```
crc: stands for "create-react-component"

The tool will ask you for some information about the component you want to create:

Welcome to the Create-React-Component-cli version #.#.###

-------------------------

Component name: MyComponent
-------------------------

Enter component path (to use the current directory press ENTER): src

-------------------------

Select language:

1. JavaScript
2. TypeScript

Please enter 1 or 2 (Default is JavaScript): 2
-------------------------

Select stylesheet format:

1. CSS
2. SCSS

Please enter 1 or 2 (Default is CSS): 2
-------------------------

Include TEST file?

1. Yes
2. No

Please enter 1 or 2 (Default is No): 2
-------------------------

Creating all necessary folder and files...

-------------------------

Your directory structure is:

  src/
  └── myComponent
      ├── hooks
          ├── useMyComponent.tsx
      ├── style
          ├── myComponent.scss
      ├── MyComponent.tsx
      └──  index.ts

-------------------------

Thank you for using create-react-js-component-cli

Created by @ Ali Helmi: ahelmi365@gmail.com

-------------------------

The second way:

The second way is to run the following command:

crc --name "MyComponent" --path "/src" --js --css --test

The tool will create the component with the following options:
- Component name: MyComponent
- Component path: /src
- Language: JavaScript
- Stylesheet language: CSS
- Test file: Yes

The tool will create the following files inside the path you specified:

  Your direwctory structure is:

  src
    └── myComponent
        ├── hooks
            ├── useMyComponent.jsx
        ├── style
            ├── myComponent.css
        ├── MyComponent.jsx
        ├── index.js
        └── myComponent.test.js

  -------------------------

  Thank you for using create-react-js-component-cli

  Created by @ Ali Helmi: ahelmi365@gmail.com

  -------------------------

Files Content:

The tool will create the following files content:
MyComponent.jsx

import "./style/myComponent.css";
import useMyComponent from "./hooks/useMyComponent";

const MyComponent = () => {
  return <div className={"myComponent-container"}>MyComponent works!</div>;
};

export default MyComponent;

useMyComponent.jsx

const useMyComponent = () => {};

export default useMyComponent;

index.js

export { default } from "./MyComponent";

myComponent.css

.myComponent-container {
}

myComponent.test.js

import React from "react";
import { render, screen } from "@testing-library/react";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("should render successfully", () => {});
});