Atom React Snippets

Snippets.coffee

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson

'.source.js':
  'Stringify':
    'prefix': 'strigify'
    'body': 'JSON.stringify(${1:param}, null, 2)'
  'Import Lodash':
    'prefix': 'ilow'
    'body': 'import _ from \'lodash\';'
  'console.log for vars':
    'prefix': 'cLog'
    'body': 'console.log({ ${1:var} })'
  'console.log as callback':
    'prefix': 'cLogNaked'
    'body': 'console.log'
  ###


        CORE JS


  ###
  'Export Value':
    'prefix': 'exportVal'
    'body': 'export { ${1:Util} };'
  'Export Function':
    'prefix': 'exportFunc'
    'body': """
      export function ${1:func}() {

      }
    """
  ###


        REDUX


  ###
  'Redux Action':
    'prefix': 'reAction'
    'body': """
      export const ${1:ACTION_NAME} = '${1:ACTION_NAME}'
      export const get${1:ACTION_NAME} = makeActionCreator(${1:ACTION_NAME}, 'prop')
    """
  'Redux Combined Reducer':
    'prefix': 'reCombReducer'
    'body': """
      import { combineReducers } from 'redux'
      import ${1:config} from './${1:config}'

      export default combineReducers({
        ${1:config},
      })

      export * from './${1:config}'
    """
  'Redux Reducer':
    'prefix': 'reReducer'
    'body': """
      import _ from 'lodash'
      // import { ACTION_NAME } from '../actions'

      const selectSlice = (state) => _.get(state, '${1:path.to.slice}')

      export const selectTesting = (state) => selectSlice(state).testing

      const defaultState = {
        testing: true,
      };

      export default (state = defaultState, action) => {
        switch (action.type) {

          //case ACTION_NAME: {
          //  return {
          //    ...state,
          //    testing: action.testing
          //  }
          //}

          default:
        }
        return state;
      }

    """
  ###


        REACT


  ###
  'React PropTypes String':
    'prefix': 'propString'
    'body': 'PropTypes.string.isRequired,'
  'React PropTypes Bool':
    'prefix': 'propBool'
    'body': 'PropTypes.bool.isRequired,'
  'React PropTypes Function':
    'prefix': 'propFunc'
    'body': 'PropTypes.func.isRequired,'
  'React PropTypes Object':
    'prefix': 'propObject'
    'body': 'PropTypes.object.isRequired,'
  'React PropTypes Node':
    'prefix': 'propNode'
    'body': 'PropTypes.node.isRequired,'
  'React PropTypes Number':
    'prefix': 'propNum'
    'body': 'PropTypes.number.isRequired,'
  'React PropTypes Element':
    'prefix': 'propElement'
    'body': 'PropTypes.element.isRequired,'
  'React PropTypes Instance Of':
    'prefix': 'propInstanceOf'
    'body': 'PropTypes.instanceOf($1).isRequired,'
  'React PropTypes OneOfType':
    'prefix': 'propOneOfType'
    'body': 'PropTypes.oneOfType([$1]).isRequired,'
  'React PropTypes Enum':
    'prefix': 'propEnum'
    'body': 'PropTypes.oneOf([$1]).isRequired,'
  'React PropTypes Shape':
    'prefix': 'propShape'
    'body': 'PropTypes.shape({$1}).isRequired,'
  'React PropTypes Array':
    'prefix': 'propArray'
    'body': 'PropTypes.arrayOf($1).isRequired,'
  'React Presentational Component':
    'prefix': 'presComp'
    'body': """
      import React from 'react'
      import PropTypes from 'prop-types'

      const ${1:Component} = ({}) => {
        return (
          <div className="$1">
            <h1>Hello, World!</h1>
          </div>
        )
      }

      $1.propTypes = {}

      export default $1

    """
  'React Redux Component':
    'prefix': 'redComp'
    'body': """
      import React from 'react'
      import PropTypes from 'prop-types'

      import { connect } from 'react-redux'
      import { compose, withProps } from 'recompose'

      let ${1:Component} = ({}) => (
        <div className="$1">
          <h1>Hello, World!</h1>
        </div>
      )

      ${1:Component} = compose(
        connect(
          state => ({})
        ),
        withProps(props => ({}))
      )(${1:Component})

      $1.propTypes = {}

      export default $1

    """
  'React Simple Presentational Component':
    'prefix': 'simpleComp'
    'body': """
      import React from 'react'

      const ${1:Component} = () => (
        <div className="$1">
          <h1>Hello, ${1:Component}!</h1>
        </div>
      )

      export default ${1:Component}

    """
  'React Naked Presentational Component':
    'prefix': 'nakedComp'
    'body': """
      const ${1:Component} = ({}) => (
        <div className="$1">
          <h1>Hello, World!</h1>
        </div>
      );
    """
  'React Create Class':
    'prefix': 'createClass'
    'body': """
      const ${1:Component} = React.createClass({
        propTypes: { },
        getDefaultProps() {
          return { };
        },
        getInitialState () {
          return { };
        },
        render() {
          return (
            <div>Hello, World!</div>
          )
        }
      });
    """
  'React Component Will Mount':
    'prefix': 'compWillMount'
    'body': """
      componentWillMount() {
        ${1}
      },
    """
  'React Component Will Update':
    'prefix': 'compWillUpdate'
    'body': """
      componentWillUpdate(nextProps, nextState) {
        ${1}
      },
    """
  'React Prop Type':
    'prefix': 'reactProp'
    'body': '${1:prop}: React.PropTypes.${2:func}${3:.isRequired},$4'
  'Export Const':
    'prefix': 'exportConst'
    'body': 'export const ${1} = \'${1}\';'