This project is a CLI tool that allows you to quickly scaffold new components. All of the necessary boilerplate will be generated automatically.
This project uses an opinionated file structure discussed in this blog post: Delightful React File/Directory Structure.
NOTE: This project is not actively maintained. I continue to use it in my own projects, but I don't have the bandwidth to review PRs or triage issues. Feel free to fork this project and tweak it however you wish. ❤️
Version 5: The new version adds support for TypeScript, and removes support for passing a custom file extension;
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:
$ 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`
import React from 'react';
function MyNewComponent() {
return <div></div>;
}
export default MyNewComponent;
These files will be formatted according to your Prettier configuration.
Configuration can be done through 3 different ways:
.new-component-config.json
in your home directory (~/.new-component-config.json
)..new-component-config.json
in your project's root directory.The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.
Controls which language, JavaScript or TypeScript, should be used.
js
— creates a .js
file (default).ts
— creates a .tsx
file.Note that all components created will be functional components. Class components are not supported.
Usage:
Command line: --lang <value>
or -l <value>
JSON config: { "lang": <value> }
Controls the desired directory for the created component. Defaults to src/components
Usage:
Command line: --dir <value>
or -d <value>
JSON config: { "dir": <value> }
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.
To get started with development:
cd
into the directory and install dependencies (yarn install
or npm install
)npm link
, while in the new-component
directory. This will ensure that the new-component
command uses this locally-cloned project, rather than the global NPM installation.new-component
command to create components and test that your changes are working.