@pbots/nrc v2.3.2

nrc

Simple CLI to create a functional react component

Quickstart

npm i -g @pbots/nrc

Usage

nrc <component-name>

nrc looks for the src/components and components directories by default

Output:

./src/components/<component-name>
├──index.js
└──<component-name>.js

Importing

The index.js file allows the component to be imported by its directory name.

Example

1. Create the component:

   nrc Button

2. Import the component into another component:

   // OtherComponent.js
   
   import Button from '../Button';

   Or if using absolute imports:

   // OtherComponent.js
   
   import Button from 'components/Button';

To specify a different directory, use -d or --dir

nrc <component-name> -d /path/to/dir
nrc <component-name> -dir /path/to/dir

Output:

./path/to/dir/<component-name>
├──index.js
└──<component-name>.js

Using Typescript

nrc <component-name> -t
nrc <component-name> --typescript

Creates .tsx files instead of .js.

Output:

./src/components/<component-name>
├──index.tsx
└──<component-name>.tsx

Using CSS modules

nrc <component-name> -m
nrc <component-name> --module

Creates a <component-name>.module.css file and imports it into <component-name>.js.

Output:

./src/components/<component-name>
├──index.js
├──<component-name>.js
└──<component-name>.module.css

Example Usage

nrc Button -m -t

Output

// Button.tsx

import styles from './Button.module.css';
import React from 'react';

const Button = () => {
    return (
        <div>
            <h1>Button</h1>
        </div>
    );
};

export default Button;

// index.tsx
export { default } from './Button.tsx';

/* Button.module.css */
/* This file is left blank so you can add your own styles */

Inspired by joshwcomeau/new-component.