npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@elv1n/nc

v1.2.0

Published

CLI for creating new React components

Downloads

11

Readme

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:

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