Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joshwcomeau/new-component
⚛ ⚡ CLI utility for quickly creating new React components. ⚡ ⚛
https://github.com/joshwcomeau/new-component
Last synced: 6 days ago
JSON representation
⚛ ⚡ CLI utility for quickly creating new React components. ⚡ ⚛
- Host: GitHub
- URL: https://github.com/joshwcomeau/new-component
- Owner: joshwcomeau
- License: mit
- Created: 2017-08-06T13:42:09.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-24T14:37:33.000Z (7 months ago)
- Last Synced: 2024-04-14T12:10:31.180Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 123 KB
- Stars: 682
- Watchers: 11
- Forks: 122
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# new-component
### Simple, customizable utility for adding new React components to your project.
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**](https://www.joshwcomeau.com/react/file-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. ❤️
## Features
- Simple CLI interface for adding React components.
- Uses [Prettier](https://github.com/prettier/prettier) to stylistically match the existing project.
- Offers global config, which can be overridden on a project-by-project basis.
- Colourful terminal output!
> **Version 5:** The new version adds support for TypeScript, and removes support for passing a custom file extension;
## Quickstart
Install via NPM:
```bash
# 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:
```bash
$ new-component MyNewComponent
```
Your project will now have a new directory at `src/components/MyNewComponent`. This directory has two files:
```jsx
// `MyNewComponent/index.js`
export { default } from './MyNewComponent';
```
```jsx
// `MyNewComponent/MyNewComponent.js`
import React from 'react';
function MyNewComponent() {
return
;
}
export default MyNewComponent;
```
These files will be formatted according to your Prettier configuration.
## 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
### Language
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 ` or `-l `
JSON config: `{ "lang": }`
### Directory
Controls the desired directory for the created component. Defaults to `src/components`
**Usage:**
Command line: `--dir ` or `-d `
JSON config: `{ "dir": }`
## 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.
## Known Issues
If you try to use this package with the Next.js App Router, you’ll run into an error:
```md
**Syntax error:** the name `default` is exported multiple times
```
This issue is described in depth in [my blog post about this package](https://joshwcomeau.com/react/file-structure/#issues-with-the-app-router). To solve this problem, you’ll need to fork this library and remove [the wildcard export](https://github.com/joshwcomeau/new-component/blob/main/src/index.js#L67).
## Development
To get started with development:
- Fork and clone the Git repo
- `cd` into the directory and install dependencies (`yarn install` or `npm install`)
- Set up a symlink by running `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.
- Spin up a test React project.
- In that test project, use the `new-component` command to create components and test that your changes are working.