Generate the component boilerplate, CSS, and a shallow render test with one line.
Run
npm install -g add-component
# Generate PureComponent and shallow render test
$ add-component ${name}
# Generate PureComponent and shallow render test with stylesheet
$ add-component ${name} -c
# Generate Functional Component and shallow render test with stylesheet
$ add-component ${name} -c -f
# Generate a full redux store
$ add-component ${name} --redux
add-component example -c
Generates example
folder with the following:
index.js
import Example from './example.js'
export default Example
style.css
.container {}
example.js
import React, { PureComponent } from 'react'
import style from './style.css'
class Example extends PureComponent {
render () {
return (
<div className={style.container}>test</div>
)
}
}
export default Example
example.test.js
import React from 'react'
import { shallow } from 'enzyme'
import Example from './example.js'
it('renders without props', () => {
shallow(<Example />)
})
add-component count --redux
Generates count
folder with the following:
actions.js
import t from './actionTypes.js'
export function increment () {
return {
type: t.INCREMENT
}
}
actionTypes.js
export default {
INCREMENT: 'INCREMENT'
}
reducer.js
import t from './actionTypes'
const defaultState = {
count: 0,
}
const score = (state = defaultState, action) => {
switch (action.type) {
case t.INCREMENT:
return {
...state,
count: state.count + 1
}
default:
return state
}
}
export default users
# Define directory with components
$ add-react-component -d src Example
# Creates component with styled-components as styling solution
$ add-react-component -c styled-components Example
# Does not use summary index.js but puts component into it
$ add-react-component --no-index Example
You can define all the options in configuration file. Also, with configuration, you can redefine technology
generators, technology templates and filenames. Look into config.js
to find out what cat be setted.
# Run with configuration
$ add-react-component --config .add-component/config.js Example
# Example of configuration
$ cat .add-component/config.js
const path = require('path')
module.exports = {
techsToGen: [
'styled-components',
'react',
'storybook',
],
techs: {
'react': {
fileName: 'index.js'
},
'storybook': {
template: path.resolve(__dirname, './storybook-template.js')
}
},
directory: './src',
}
In techsToGen
, you can define the list of technologies to generate. This list will overwrite the default list, but if
you include *
, the default technologies will preserve.
Note, that for custom technologies you will also need its configuration in techs
field.
To re-define the list of technolofies:
module.exports = {
techsToGen: [
'styled-components',
'react'
]
}
To save default list of technologies and add more:
module.exports = {
techsToGen: [
'*',
'styled-components'
]
}
MIT © Jack Hanford