Snippets for sublime react

Mac OS X

Install:

./installMac
# snippets will be copied to `~/Library/Application Support/Sublime Text 3/Packages/User/react`

Uninstall:

./uninstallMac

Ubuntu

Install:

./installUbuntu
# snippets will be copied to `~/.config/sublime-text-3/Packages/User/react`

Uninstall:

./uninstallUbuntu

For other platforms:

# Install
cp -r ./*.sublime-snippet ~/.Sublime\ Text\ 3/Packages/User/react

# Remove
rm -rf ~/.Sublime\ Text\ 3/Packages/User/react

Props

Trigger: defaultProps
Tab switch: 2
Template: 1:children, 2:''
Result:

static defaultProps = {
  children: ''
};

---

Trigger: propTypes
Tab switch: 2
Template: 1:children, 2:any
Result:

static propTypes = {
  children: React.PropTypes.any
};

Context

Trigger: getChildContext
Tab switch: 2
Template: 1:name, 2:string
Result:

static childContextTypes = {
  name: React.PropTypes.string
};

getChildContext() {
  return {
    name: string
  };
}

---

Trigger: contextTypes
Tab switch: 2
Template: 1:name, 2:string
Result:

static contextTypes = {
  name: React.PropTypes.string
};

Imports

Trigger: imports
Tab switch: 2
Template: 1:Directory, 2:Component
Result:

import DirectoryComponent from 'Directory/Component/DirectoryComponent';

Component

Trigger: rComponent
Tab switch: 1
Template: 1:ComponentName
Result:

import React, { Component } from 'react';


export default class ComponentName extends Component {

  /**
   * Render component ComponentName
   */
  render() {
    return (
      <div>

      </div>
    );
  }
}

---

Trigger: rComponentStyled (rcs)
Tab switch: 1
Template: 1:ComponentName
Result:

import CN from 'classnames';
import css from './ComponentName.styl';
import React, { Component } from 'react';


export default class ComponentName extends Component {

  /**
   * Render component ComponentName
   */
  render() {
    return (
      <div className={CN(css.ComponentName)}>

      </div>
    );
  }
}

---

Trigger: rBranch (rba)
Tab switch: 3
Template: 1:ComponentName, 2:baobab_branch, 3:array
Result:

import React, { Component } from 'react';


@SubscribedTo('baobab_branch')
export default class ComponentName extends Component {

  static propTypes = {
    baobab_branch: React.PropTypes.array.isRequired
  };

  /**
   * Render component ComponentName
   */
  render() {
    return (
      <div>

      </div>
    );
  }
}

---

Trigger: rBranchStyled (rbs)
Tab switch: 3
Template: 1:ComponentName, 2:baobab_branch, 3:array
Result:

import CN from 'classnames';
import css from './ComponentName.styl';
import React, { Component } from 'react';


@SubscribedTo('baobab_branch')
export default class ComponentName extends Component {

  static propTypes = {
    baobab_branch: React.PropTypes.array.isRequired
  }

  /**
   * Render component ComponentName
   */
  render() {
    return (
      <div className={CN(css.ComponentName)}>

      </div>
    );
  }
}

Actions

Trigger: rAction (rac)
Tab switch: 4
Template: 1:getAccount, 2:userID, 3:get, 4:account/${userID}
Result:

/**
 * !<Need description for getAccount>!
 *
 * @returns {Promise}       Thenable/Catcheable
 */
export function getAccount(userID) {
  return get(`/account/${userID}`)
    .then((response) => {

      return response;
    });
}