@elv1n/nc
CLI for creating new React components
Last updated 5 months ago by elv1n .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @elv1n/nc 
SYNC missed versions from official npm registry.

new-component logo
npm

nc

Simple, customizable utility for adding new React components to your project.

Anyone else sick of writing the same component boilerplate, over and over?

This project is a globally-installable CLI for adding new React components. It's dead simple to use, and requires no configuration, although it's easy to customize it to fit your project's coding style.


Features

  • Simple CLI interface for adding Component, PureComponent, or Stateless Functional components.
  • Uses Prettier to stylistically match the existing project.
  • Offers global config, which can be overridden on a project-by-project basis.
  • Colourful terminal output!

Quickstart

Install via NPM:

# Using Yarn:
$ yarn global add @elvin/nc

# or, using NPM
$ npm i -g @elvin/nc

$ nc MyComponent

cd into your project's directory, and try creating a new component:

demo of CLI functionality

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

// `Button/index.js`
export { Button } from './Button';
// `Button/Button.js`
import React from 'react';
import PropTypes from 'prop-types';

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

Button.propTypes = {

};

Button.defaultProps = {

};

Configuration

Configuration can be done through 3 different ways:

  • Creating a global .new-component-config.json in your home directory (~/.new-component-config.json).
  • Creating a local .new-component-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

Type

Control the type of component created:

  • functional for a stateless functional component.
  • functional-with-props for a stateless functional component.
  • class for a traditional Component class (default),
  • pure-class for a PureComponent class,

Legacy createClass components are not supported, although support would be easy to add. Feel free to open an issue (or a PR!).

Usage:

Command line: --type <value> or -t <value>

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

Directory

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

Legacy createClass components are not supported, although support would be easy to add. Feel free to open an issue (or a PR!).

Usage:

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

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

File Extension

Controls the file extension for the created components. Can be either js (default) or jsx.

Usage:

Command line: --extension <value> or -x <value>

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

Prettier Config

Delegate settings to Prettier, so that your new component is formatted as you'd like. Defaults to Prettier defaults.

For a full list of options, see the Prettier docs.

Usage:

Command line: N/A (Prettier config is only controllable through JSON)

JSON config: { "prettierConfig": { "key": "value" } }

Example:

{
  "prettierConfig": {
    "singleQuote": true,
    "semi": false,
  }
}

Development

To get started with development:

  • Check out this git repo locally, you will need to ensure you have Yarn installed globally.
  • In the folder run yarn install
  • Check that command runs node ../new-component/src/index.js --help
  • Alternatively you can set up a symlink override by running npm link then nc --help. Note: this will override any globally installed version of this package.

Credits

Forked from joshwcomeau/new-component

Current Tags

  • 1.2.0                                ...           latest (5 months ago)

7 Versions

  • 1.2.0                                ...           5 months ago
  • 1.1.2                                ...           6 months ago
  • 1.1.1                                ...           6 months ago
  • 1.1.0                                ...           6 months ago
  • 1.0.2                                ...           9 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 9
Last Day 0
Last Week 7
Last Month 0
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |