new-component

    4.0.1 • Public • Published

    new-component logo
    npm

    new-component

    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 React 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 new-component
    
    # or, using NPM
    $ npm i -g new-component

    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 { default } from './Button';
    // `Button/Button.js`
    import React, { Component } from 'react';
    
    class Button extends Component {
      render() {
        return <div />;
      }
    }
    
    export default Button;

    This structure might appear odd to you, with an index.js that points to a named file. I've found this to be an optimal way to set up components; the index.js allows you to import from the directory (eg. import Button from 'components/Button'), while having Button.js means that you're never lost in a sea of index.js files in your editor.

    This structure is not currently configurable, but I'm happy to consider implementing alternatives!


    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 (default).
    • class for a traditional Component class,
    • pure-class for a PureComponent class,

    Legacy createClass components are not supported.

    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

    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,
      }
    }

    (Ideally, the plugin would consume your project's prettier settings automatically! But I haven't built this yet. PRs welcome!)


    Platform Support

    This has only been tested in macOS. I think it'd work fine in linux, but I haven't tested it. Windows is a big question mark (would welcome contribution here!).


    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 new-component --help. Note: this will override any globally installed version of this package.

    Install

    npm i new-component

    DownloadsWeekly Downloads

    60

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    85.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • joshwcomeau