create-connected

Create Styled React Component

Installation

npm install -g create-connected

Action

☁ ~ create-connected garden
Garden.js created

Result

☁ ~ cat Garden.js
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { connect } from 'react-redux';

const GardenStyle = styled.div`
  opacity: 1
`

const Garden = props => (
  <GardenStyle>
    <div onClick={() => props.onDivClick(props.copy)}>Hello {props.copy}</div>
    {props.items.map(item => (
      <div onClick={() => props.onDivClick(item)}>{item}</div>
    ))}
  </GardenStyle>
)

const mapDispatchToProps = dispatch => ({
  onDivClick: (e) => dispatch(alert(e))
})

const mapStateToProps = state => ({
  copy: state.copy,
  items: state.items,
})

Garden.propTypes = {
  copy: PropTypes.string,
  items: PropTypes.array,
}

Garden.defaultProps = {
  copy: 'React is here!',
  items: ['a', 'b', 'c']
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Garden)