React snippets for Atom

react-snippets.cson

'.source.js.jsx':
  'ReactJS Component single unit test':
    'prefix': 'comput'
    'body': """
      it('$1', () => {
        const {output} = setup();
        const expected = $2;
        const actual = $3;
        expect(actual).toEqual(expected);
      });
    """
  'ReactJS Component Unit Test Template':
    'prefix': 'compspec'
    'body': """
      import React from 'react';
      import {shallow} from 'enzyme';
      import $1 from './$1';

      const setup = propOverrides => {
        const minProps = {$2};
        const props = {
          ...minProps,
          ...propOverrides,
        };
        const output = shallow(<$1 {...props} />);
        return {
          props,
          output,
        };
      };

      describe('<$1 />', () => {
        it('does not explode', () => {
          // This will fail if component throws
          const {output} = setup();
          expect(output.exists()).toBe(true);
        });
      });
    """
    'description': 'Common imports for .spec.js test files'
    'leftLabelHTML': '<span style="color:#61dafb;">ReactJS</span>'
    'rightLabelHTML': '<span style="color:#99424f;">Test</span>'
  'ReactJS Function Component Template':
    'prefix': 'compfn'
    'body': """
      /**
       * @module {Function} components/$1
       * @flow
       */
      import * as React from 'react';

      type Props = {$2};

      const $1 = ({$2}: Props): React.Node => (

      );
      $1.displayName = '$1';

      export default $1;
    """
    'description': 'Stateless react component template'
    'leftLabelHTML': '<span style="color:#61dafb;">ReactJS</span>'
  'ReactJS Class PureComponent Template':
    'prefix': 'compclass'
    'body': """
      /**
       * @module {Function} components/$1
       * @flow
       */
      import * as React from 'react';

      type Props = {$2};
      type State = {$3};

      export default class $1 extends React.PureComponent<Props, State> {

        static displayName = '$1';
        static defaultProps = {};

        // TODO: The following are optional lifecycle methods in the React.Component interface. Use them or delete them.

        // Mounting
        constructor(props: Props) { super(props); this.state = {}; } // https://reactjs.org/docs/react-component.html#constructor
        componentWillMount(): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
        componentDidMount(): void {} // https://reactjs.org/docs/react-component.html#componentdidmount
        componentWillUnmount(): void {} // https://reactjs.org/docs/react-component.html#componentwillunmount

        // Updating
        componentWillReceiveProps(nextProps: Props): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
        shouldComponentUpdate(nextProps: Props, nextState: State): boolean {} // https://reactjs.org/docs/react-component.html#shouldcomponentupdate
        componentWillupdate(nextProps): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
        componentDidUpdate(prevProps, prevState): void {} // https://reactjs.org/docs/react-component.html#componentdidupdate

        // Errors
        componentDidCatch(error, info): void {} // https://reactjs.org/docs/react-component.html#componentdidcatch

        render(): React.Node {
          const {} = this.props;
          return ();
        }
      }
    """
  'ReactJS Container Component Template':
    'prefix': 'compcontainer'
    'body': """
      /**
       * @module {Function} containers/$1
       * @flow
       */
      import * as React from 'react';
      import {connect} from 'react-redux';
      import {bindActionCreators} from 'redux';
      import * as actions from '../actions';

      import type {Dispatch} from 'redux';

      type Props = {$2};
      type State = {$3};

      export class $1 extends React.Component<Props, State> {

        static displayName = '$1';
        static defaultProps = {};

        // TODO: The following are optional lifecycle methods in the React.Component interface. Use them or delete them.

        // Mounting
        constructor(props: Props) { super(props); this.state = {}; } // https://reactjs.org/docs/react-component.html#constructor
        componentWillMount(): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
        componentDidMount(): void {} // https://reactjs.org/docs/react-component.html#componentdidmount
        componentWillUnmount(): void {} // https://reactjs.org/docs/react-component.html#componentwillunmount

        // Updating
        componentWillReceiveProps(nextProps: Props): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
        shouldComponentUpdate(nextProps: Props, nextState: State): boolean {} // https://reactjs.org/docs/react-component.html#shouldcomponentupdate
        componentWillupdate(nextProps): void {} // https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
        componentDidUpdate(prevProps, prevState): void {} // https://reactjs.org/docs/react-component.html#componentdidupdate

        // Errors
        componentDidCatch(error, info): void {} // https://reactjs.org/docs/react-component.html#componentdidcatch

        render(): React.Node {
          const {} = this.props;
          return ();
        }
      }

      const mapStateToProps = <S, OP: Props, SP: Props>(state: S, props: OP): SP => ({});
      const mapDispatchToProps = <A, D: Dispatch<A>, OP: Props, DP: Props>(dispatch: D, props: OP): DP =>
        bindActionCreators(actions, dispatch);

      export default connect(
        mapStateToProps,
        mapDispatchToProps,
      )($1);
    """