📦 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 with styled-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 💚 License © 2023 Dennis Ollhoff