Atom React Snippets

snippets.cson

# 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:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

'.source.js':
  'constructor':
    'prefix': 'construct'
    'body': '''
      constructor(props) {
        super(props);
        $1
      }
    '''

  'render':
    'prefix': 'render'
    'body': '''
      render() {
        return (
          <$1>
            $2
          </$1>
        );
      }
    '''

  'jest it':
    'prefix': 'it'
    'body': '''
      it('$1', () => {});
    '''

  'componentDidMount':
    'prefix': 'cdm'
    'body': '''
      componentDidMount() {
        $1
      }
    '''

  'componentWillMount':
    'prefix': 'cwm'
    'body': '''
      componentWillMount() {
        $1
      }
    '''

  'componentWillUnount':
    'prefix': 'cwum'
    'body': '''
      componentWillUnmount() {
        $1
      }
    '''

  'componentWillReceiveProps':
    'prefix': 'cwrp'
    'body': '''
      componentWillReceiveProps(nextProps) {
        $1
      }
    '''

  'shouldComponentUpdate':
    'prefix': 'scu'
    'body': '''
      shouldComponentUpdate() {
        $1
      }
    '''

  'componentDidUpdate':
    'prefix': 'cdu'
    'body': '''
      componentDidUpdate() {
        $1
      }
    '''

  'Empty State':
    'prefix': 'state'
    'body': '''
      this.state = {
        $1
      };
    '''

  'Const { x } = this.props':
    'prefix': 'props'
    'body': '''
      const { $1 } = this.props;
    '''

  'Create React Class':
    'prefix': 'class'
    'body': 'class $1 extends Component'

  'import Styled Components':
    'prefix': 'styled'
    'body': 'import styled from \'styled-components\';'

  'import grid-styled':
    'prefix': 'grid'
    'body': 'import { Flex, Box } from \'grid-styled\';'

  'import React':
    'prefix': 'react'
    'body': 'import React from \'react\';'

  'import React, Component':
    'prefix': 'reactc'
    'body': 'import React, { Component } from \'react\';'

  'import PropTypes':
    'prefix': 'prop'
    'body': 'import PropTypes from \'prop-types\';'

  'set Component PropTypes':
    'prefix': 'propT'
    'body': '''
      $1.propTypes = {
        $2
      };
    '''

  'set Component defaultProps':
    'prefix': 'defa'
    'body': '''
      $1.defaultProps = {
        $2
      };
    '''

  'React Component':
    'prefix': 'comp'
    'body': '''
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';

      class $1 extends Component {
        render() {
          return <div />;
        }
      }

      $1.defaultProps = {};
      $1.propTypes = {};

      export default $1;
    '''