@freddydumont/new-component
v1.0.1
Published
CLI for creating new React components. Fork of new-component.
Downloads
5
Maintainers
Readme
@freddydumont/new-component
A fork of https://github.com/joshwcomeau/new-component. Less options, more TypeScript and Storybook. See the original documentation below.
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:
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; theindex.js
allows you toimport
from the directory (eg.import Button from 'components/Button'
), while havingButton.js
means that you're never lost in a sea ofindex.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
thennew-component --help
. Note: this will override any globally installed version of this package.