Skip to content

An awesome CLI utility for quickly create new React components.

Notifications You must be signed in to change notification settings

codingcodax/new-comp

Repository files navigation

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:

# 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:]

$ new-component MyNewComponent

Your project will now have a new directory at src/components/MyNewComponent. This directory has two files:

// `MyNewComponent/index.js`
export { default } from './MyNewComponent';
// `MyNewComponent/MyNewComponent.js`
function MyNewComponent() {
  return (
    <div>
      <p>MyNewComponent</p>
    </div>
  );
}

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 <value> or -l <value>

JSON config: { "lang": <value> }

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 <value> or -t <value>

JSON config: { "type": <value> }

UI Library

Controls which ui library, vanilla, Chakra UI or MUI should be used.

  • Vanilla — use <div> and <p> tags.
  • Chakra UI — use <Box> and <Text> components.
  • Material UI — use <Box> and <Typography> components.

Usage: Command line: --ui <value>

JSON config: { "ui": <value> }

Directory

Controls the desired directory for the created component. Defaults to src/components

Usage: Command line: --dir <value> or -d <value>

JSON config: { "dir": <value> }

License

Licensed under the MIT license

About

An awesome CLI utility for quickly create new React components.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published