Giter Site home page Giter Site logo

new-component's Introduction

Create New React Component CLI

This will help you to quickly create a new React component folder. It will create a basic component file and a test folder in the same directory. The resulting filestructure will look like this:

└── Button
    ├── Button.tsx
    ├── __test__
    │   └── Button.test.tsx
    └── index.ts

By default it will try to create the components in the src/components directory. If your project has a different structure, you can specify the path to the components directory by passing the --directory flag.

Usage

You can run the package by either using npx or installing it globally.

NPX

To run it with npx run npx @maxklammer/new-component help to see the available commands.

$ npx @maxklammer/new-component <component-name> [option]

   COMMANDS

  help  Create the a folder structure for a new component e.g. new-component Button

   OPTIONS

  --directory    The directory structure to create the component in Default: src/components
  --javascript   Create a JaveScript component Default: false
  -v, --version  Print CLI version Default: false

Local Installation

Run npm install -g @maxklammer/new-component to install the package.

You can now run new-component from anywhere.

Credits

This package was heavily inspired by Josh Comeau's new-component package. Check out his package for some more options.

new-component's People

Watchers

Maximilian Klammer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.