2.0.5 • Published 6 years ago
juan-component v2.0.5
React Component Creator
Simple NodeJS command line tool to create React components.
Usage
$ createComponent <name> [parentDirectory] [options]The tool can create 5 types of components: Functional, Redux container, Styled component, Class or HOCs.
To create a functional component simply type createComponent MyReactComponent ./I-Want-it-Here.
This will create the following:
the file ./I-Want-it-Here/MyReactComponent/index.js
import React from 'react'
const MyReactComponent = (props) => {
return(
<div>
MyComponent
</div>
)
}
export default MyReactComponent- The default path it will use is "./src/components"
- If the path does not exist, it will not create the component
- Component names must start with an upper case letter
- The tool always creates a folder inside the given path with the component's name and a "index.js" file. This cannot be changed.
- Shorthand commands exist to create class, HOCs, container, styled and functional components. They are createClass, createHigher, createContainer, createStyled and createFunctional.
Options
| Option | Info |
|---|---|
--type <type> | this option is the long way of changing the component type. It accepts either func, hoc, styled, cont or class as the argument. the default type is func |
-c , --class | create a class component. The same as --type class |
-f , --func | create a functional component. The same as --type func |
-i , --hoc | create a higher order component. The same as --type hoc |
-r , --cont | create a redux container component. The same as --type cont |
-s , --styled [tag] | create a styled component using the tag tag. Tag name is not validated so unsupported html tags are counted as valid tags to create the component. The default tag is 'div'. Same as --type styled but this way the default tag will be used |
--inline [name] | add a style through js. This will create an object name and add it as an inline style. The default name is the component's name followed by "Style". This option is ignored when creating a HOC |
--css [class] | add style through a css file. This will create a css file with the component's name in the same folder as the index.js file and imported inside it. The css file will have a single class named class. The default value of class is the component's name in lower case. This option is ignored when creating a HOC. |
--hooks <hooks> | this options add react hooks imports to the file. The hooks must be written as a single string of comma separated names i.e. "useMemo,useState,...". This option is ignored unless a functional component is created. If this option is set without an explicit component type, it created a functional component |
--imports <imports> | this options adds extra imports to the component. The imports must be a single string of comma separated names i.e. "lodash,ramda,...". The generated imports look like the following: import [importName] from '[importName]' |
--props <props> | this option adds props to the component. The props must be a single string of the prop names separated by a comma i.e. "color,onClick,...". If the component is a class component, a destructuring of "this.props" will be added to the render method. If it's a functional component then argument destructuring will be used. If it's a HOC, they are ignored. |
--verbose | show details of component creation |
--force-name | disables component name validation. Not recommended |
--dry | disables file creation. For easier developing |
--debug | shorthand for --verbose --dry. For easier developing |