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
});

eJOY-React-Native-Snippets

eJOY JSC