Usage

After install this snippets add this inside your settings

"editor.snippetSuggestions": "top",

Snippets List

Snippets	Content
imr	Import React
imrc	Import React Component
imrn	Import React-Native Element
ims	Import Styled-Components
imsn	Import Styled-Components Native
rct	Redux constant
crr	Connect Redux
sl	Stateless Component
slc	Stateless Component Function
ccs	Component Class
edccs	Export default Component Class
rrd	Redux Reducer
rpf	Redux Pure Function
rpc	Redux Pure Function Const
cwm	ComponentWillMount
cdm	ComponentDidMount
cdu	ComponentDidUpdate
cwu	ComponentWillUpdate
cwum	ComponentWillUnmount
cwrp	ComponentWillReceiveProps
ess	EStyleSheet Style
ed	Export default
edl	EslintDisableLine
styc	Styled Component
estyc	Export Styled Component
edstyc	Export default Styled Component
cmmb	Comment Big Block
log	Console Log
tdesc	Test Describe
tit	Test It

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Trigger	Content
rcc→	class component skeleton
rccp→	class component skeleton with prop types after the class
rcjc→	class component skeleton without import and default export lines
rcfc→	class component skeleton that contains all the lifecycle methods
rsc→	stateless component skeleton
rscp→	stateless component with prop types skeleton
rpt→	empty propTypes declaration
con→	class default constructor with props
conc→	class default constructor with props and context
est→	empty state object
ren→	render method
sst→	this.setState with object as parameter
ssf→	this.setState with function as parameter
props→	this.props
state→	this.state
bnd→	binds the this of method inside the constructor
rrcon→	reactReduxContainer

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

Trigger	Content
pta→	PropTypes.array,
ptar→	PropTypes.array.isRequired,
ptb→	PropTypes.bool,
ptbr→	PropTypes.bool.isRequired,
ptf→	PropTypes.func,
ptfr→	PropTypes.func.isRequired,
ptn→	PropTypes.number,
ptnr→	PropTypes.number.isRequired,
pto→	PropTypes.object.,
ptor→	PropTypes.object.isRequired,
pts→	PropTypes.string,
ptsr→	PropTypes.string.isRequired,
ptnd→	PropTypes.node,
ptndr→	PropTypes.node.isRequired,
ptel→	PropTypes.element,
ptelr→	PropTypes.element.isRequired,
pti→	PropTypes.instanceOf(ClassName),
ptir→	PropTypes.instanceOf(ClassName).isRequired,
pte→	PropTypes.oneOf(['News', 'Photos']),
pter→	PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet→	PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr→	PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
ptao→	PropTypes.arrayOf(PropTypes.number),
ptaor→	PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo→	PropTypes.objectOf(PropTypes.number),
ptoor→	PropTypes.objectOf(PropTypes.number).isRequired,
ptsh→	PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr→	PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,

---

imr [Import React]

import React from 'react';

---

imrc [Import React Component]

import React, { Component } from 'react';

---

imrn [Import React-Native Element]

import { $1 } from 'react-native';

---

ims [Import Styled-Components]

import styled from 'styled-components';

---

imsn [Import Styled-Components Native]

import styled from 'styled-components/native';

---

rct [Redux Constant]

export const $1 = '$1';

---

crr [Connect Redux]

import { connect } from 'react-redux';

---

sl [Stateless Component]

const $1 = () => (
  $2
);

export default $1;

---

slc [Stateless Component Function]

function $1($2) {
  $3
}

export default $1;

---

ccs [Component Class]

class $1 extends Component {
  state = { $2 }
  render() {
    return (
      $3
    );
  }
}

export default $1;

---

edccs [Export default Component Class]

export default class $1 extends Component {
  state = { $2 }
  render() {
    return (
      $3
    );
  }
}

---

rrd [Redux Reducer]

export default (state = $1, action) => {
  switch (action.type) {
    case $2:
      $3
    default:
      return state;
  }
};

---

rpf [Redux pure function]

export const $1 = '$1';

export function $2($3) {
  return {
    type: $1,
    $3
  }
}

---

rpc [Redux pure function const]

export const $1 = '$1';

export const $2 = $3 => ({
  type: $1,
  $3
});

---

cwm [ComponentWillMount]

componentWillMount() {
  $1
}

cwu [ComponentWillUpdate]

componentWillUpdate() {
  $1
}

---

cdu [ComponentDidUpdate]

componentDidUpdate(prevProps, prevState) {
  $1
}

---

cdm [ComponentDidMount]

componentDidMount() {
  $1
}

---

cwum [ComponentWillUnmount]

componentWillUnmount() {
  $1
}

---

cwrp [ComponentWillReceiveProps]

componentWillReceiveProps(nextProps) {
  $1
}

---

ess [EStyleSheet]

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  $1
});

export default styles;

---

ed [Export default]

export default $1;

---

edl [Eslint Disable Line]

// eslint-disable-line

---

styc [Styled Component]

const $1 = styled.$2`
  $3
`

---

estyc [Export Styled Component]

export const $1 = styled.$2`
  $3
`

edstyc [Export default Styled Component]

export default styled.$1`
  $2
`

cmmb [Comment Big Block]

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

---

log [Console Log]

console.log('====================================');
console.log($1);
console.log('====================================');

---

tdesc [Test Describe]

describe('$1', () => {
  $2
});

---

tit [Test It]

it('should $1', $2($3) => {
  $4
});