EQuimper / VSC-React-Native-React-Redux-Snippets

Snippets for React and React-Native with a bit of Redux for es6/es7 user.

No Semicolon ?

For the version without semi-colon look this one https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux-snippets-for-es6-es7-version-standard

Usage

After install this snippets add this inside your settings

"editor.snippetSuggestions": "top",

Snippets List

Snippets	Content
imr	Import React
imro	Import React as Object
imrc	Import React Component
imrpc	Import React PureComponent
imrn	Import React-Native Element
ims	Import Styled-Components
imsn	Import Styled-Components Native
impt	Import PropTypes
rct	Redux constant
crr	Connect Redux
sl	Stateless Component
slr	Stateless Component Return
slc	Stateless Component Function
ccs	Component Class
cccs	Component Class With Constructor
ccsf	Component Class FlowType
pcs	PureComponent Class
pccs	PureComponent Class With Constructor
pcsf	PureComponent FlowType
ccsr	Component Class With Redux
edccs	Export default Component Class
rrd	Redux Reducer
rpf	Redux Pure Function
rpc	Redux Pure Function Const
cwm	ComponentWillMount
cdm	ComponentDidMount
cdu	ComponentDidUpdate
scu	ShouldComponentUpdate
cwu	ComponentWillUpdate
cwum	ComponentWillUnmount
cwrp	ComponentWillReceiveProps
cdc	ComponentDidCatch
cct	Create Context
gds	getDerivedStateFromProps
rnss	StyleSheet Style
ess	EStyleSheet Style
ed	Export default
edl	EslintDisableLine
ednl	EslintDisableNextLine
styc	Styled Component
estyc	Export Styled Component
edstyc	Export default Styled Component
cmmb	Comment Big Block
log	Console Log
cl	Standard console.log
tt	Test
tdesc	Test Describe
tit	Test It
ffm	FlowFixMe
rnstory	React-Native Story
rstory	React Story
rsf	React Stateless Function

---

imr [Import React]

import React from 'react';

---

imro [Import React as Object]

import * as React from 'react';

---

imrc [Import React Component]

import React, { Component } from 'react';

---

imrpc [Import React PureComponent]

import React, { PureComponent } 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';

---

impt [Import PropTypes]

import PropTypes from 'prop-types';

---

rct [Redux Constant]

export const $1 = '$1';

---

crr [Connect Redux]

import { connect } from 'react-redux';

---

sl [Stateless Component]

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

export default $1;

---

slr [Stateless Component Return]

const $1 = () => {
  return (
    $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;

---

cccs [Component Class With Constructor]

class $1 extends Component {
  constructor(props) {
    super(props);
    this.state = { $2 };
  }
  render() {
    return (
      $3
    );
  }
}

export default $1;

---

ccsf [Component Class FlowType]

type P = {
  $1
};

type S = {
  $2
};

class $3 extends Component<P, S> {
  constructor(props) {
    super(props);
    this.state = { $4 };
  }
  render() {
    return (
      $5
    );
  }
}

export default $3;

---

pcs [PureComponent Class]

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

export default $1;

---

---

pccs [PureComponent Class With Constructor]

class $1 extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { $2 };
  }
  render() {
    return (
      $3
    );
  }
}

export default $1;

---

pcsf [PureComponent Class FlowType]

type P = {
  $1
};

type S = {
  $2
};

class $3 extends PureComponent<P, S> {
  constructor(props) {
    super(props);
    this.state = { $4 };
  }
  render() {
    return (
      $5
    );
  }
}

export default $3;

---

ccsr [Component Class With Redux]

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

export default connect($4, $5)($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
}

---

scu [ShouldComponentUpdate]

shouldComponentUpdate(nextProps, nextState, nextContext) {
  $1
}

---

cdm [ComponentDidMount]

componentDidMount() {
  $1
}

---

cwum [ComponentWillUnmount]

componentWillUnmount() {
  $1
}

---

cwrp [ComponentWillReceiveProps]

componentWillReceiveProps(nextProps) {
  $1
}

---

cdc [ComponentDidCatch]

componentDidCatch(error, info) {
  $1
}

---

cct [Create Context]

const $1Context = createContext($2);

class $1Provider extends Component {
  state = {
    $3
  }

  render() {
    return (
      <$1Context.Provider value={{ state: { $3 }, actions: {} }}>
        {this.props.children}
      </$1Context.Provider>
    );
  }
}

export default $1Provider;

---

gds [getDerivedStateFromProps]

static getDerivedStateFromProps(nextProps, prevState) {
  $1
}

---

rnss [StyleSheet Style]

const styles = StyleSheet.create({
  $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

---

ednl [Eslint Disable Next Line]

// eslint-disable-next-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('====================================');

---

cl [Standard console.log]

console.log($1);

---

tt [Test]

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

---

tdesc [Test Describe]

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

---

tit [Test It]

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

---

ffm [FlowFixMe]

// $FlowFixMe

---

rnstory [React-Native Story]

import React from 'react';
import { storiesOf } from '@storybook/react-native';

storiesOf('$1', module)
  .add('default', () => $2);

---

rstory [React Story]

import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('$1', module)
  .add('default', () => $2);

---

rue [React useEffect]

React.useEffect(() => {
  $1
}, []);

---

rsf [React Stateless Function]

import React from "react";

function $1(props) {
  return (
    <div>

    </div>
  );
}

export default $1;

---