📦 get-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.
Note: This project is designed to work with Next.js, but it should work with any React project. This Projekt use NerdFonts for the icons in the terminal. If you don't have them installed, you can find them here: NerdFonts.
🌟 Features
- Simple CLI interface for adding React components.
- Designed to work seamlessly with Next.js and its new app router.
- Offers global config, which can be overridden on a project-by-project basis.
- Colourful terminal output!
- Supports only TypeScript.
- Supports only functional components.
- Supports components with styled-components.
⏱️ Quickstart
📥 Install:
# pnpm
pnpm add -g get-component@latest
# yarn
yarn global add get-component@latest
# npm
$ npm i -g get-component@latest
cd
into your project's directory, and try creating a new component:
📂 With new folder, component, and index file
getc MyNewComponent -n
Your project will now have a new directory at app/components/MyNewComponent
. This directory has two files:
// `MyNewComponent/index.ts`
export * from './MyNewComponent'
export { default } from './MyNewComponent'
// `MyNewComponent/MyNewComponent.tsx`
export default function MyNewComponent() {
return (
<>
</>
)
}
➕ Only one new component
getc MyNewComponent
creates a new component with selected name directly in app/components folder
🛠️ Only one new component in the desired path
getc MyNewComponent -p Sections
creates a new component with selected name directly in app/components/Sections folder
💅 With styled-components
getc MyNewComponent -s
import styled from 'styled-components'
export default function MyNewComponent() {
return (
<Wrapper>
</Wrapper>
)
}
const Wrapper = styled.div``
⚙️ Configuration
Configuration can be done through 3 different ways:
- Creating a global
.getc-config.json
in your home directory (~/.getc-config.json
). - Creating a local
.getc-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
📝 Template
Controls which template, normal or with styled-components, should be used.
-
-s
— creates a component file withstyled-components
. - normal is default and needs no flag.
Note that all components created will be functional components. Class components are not supported.
Usage:
Command line: --sytle
or -s
📁 Directory
Controls the desired directory for the created component. Defaults to app/components
Usage:
Command line: --dir <value>
or -d <value>
JSON config: { "dir": <value> }
🌐 Platform Support
This has only been tested in macOS. I think it'd work fine in linux, but I haven't tested it in Windows.
📜 License
MIT