
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@freddydumont/new-component
Advanced tools
CLI for creating new React components. Fork of new-component.
A fork of https://github.com/joshwcomeau/new-component. Less options, more TypeScript and Storybook. See the original documentation below.
new-component
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.
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 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.
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> }
Controls the desired directory for the created component. Defaults to src/components
Usage:
Command line: --dir <value>
or -d <value>
JSON config: { "dir": <value> }
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> }
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!)
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!).
To get started with development:
yarn install
node ../new-component/src/index.js --help
npm link
then new-component --help
. Note: this will override any globally installed version of this package.FAQs
CLI for creating new React components. Fork of new-component.
We found that @freddydumont/new-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.