New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

generate-react-component

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

generate-react-component

Generate a react component with CLI

latest
Source
npmnpm
Version
0.1.6
Version published
Maintainers
1
Created
Source

generate-react-component

An opinionated CLI generator for ReactJS components.

Why?

As a ReactJS developer, from time to time, I have to create components of same structure, by manual copy & paste. It is a time consuming no-brainer process that any React dev may repeat everyday.

Typically, there are two kinds of components: Functional and Class Components, the basic structure of either could always look the same, in one project:

Functional Component:

import React from 'react'

const Cmp = (props) => {
  return (
    <div className={s.cover} style={bgStyle} >
    </div>
  )
}

export default Cover

Class Component:

import React, { Component } from 'react'

class Cmp extends Component {
    componentDidMount() {
    }
    render() {
        return (
        )
    }
}

export default Cmp  

It should be a super easy tool to automatically generate these files, without manual new file creation or copy & paste. So, here you are.

Install

Run

npm install -g generate-react-component

You may need to sudo it.


## Usage

Generate Class Component

Run

rcmp <ComponentName>

This will create a folder of your component name, and a Class Component js file with the same name.


Generate Pure Function Component

Run

rcmp <ComponentName> --pure

or

rcmp <ComponentName> -p

This will create a folder of your component name, and Pure Function Component js file of the same name.


### Generate Component (Class or Pure) with a CSS file

Run

rcmp <ComponentName> --pure --css

or

rcmp <ComponentName> -p -c

This will create a folder of your component name, and component (Functional if --pure) js file of the same name, and a css file of the same name.


That's it!

Enjoy and feel free to share your suggestion!

###TODO

  • Add yarn add globalsupport
  • Add Chalk fancy colors

FAQs

Package last updated on 05 Mar 2017

Did you know?

Socket

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.

Install

Related posts