VSCode-Typescript-React-Redux-Snippets

Typescript, React and Redux snippets for VSCode (followed ES6 standard)

Snippets

_tsr : basic typescript react template

import * as React from 'react';

interface I${1:ComponentName}Props { }

interface I${1:ComponentName}State { }

export default class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> {
  public render() {
    return (
      ${2:<span>Body</span>}
    );
  }
}

_tsrr : typescript react redux template

import * as React from 'react';
import { connect } from 'react-redux';
import { AnyAction, Dispatch } from 'redux';

// Component

interface I${1:ComponentName}StateProps { }

interface I${1:ComponentName}DispatchProps { }

interface I${1:ComponentName}Props extends I${1:ComponentName}StateProps, I${1:ComponentName}DispatchProps { }

interface I${1:ComponentName}State { }

export class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> {
  public render() {
    return (
      ${3:<span>Body</span>}
    );
  }
}

// Container

interface I${1:ComponentName}OwnProps { }

const mapStateToProps = (state: ${2:IGlobalState}, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}StateProps => {
  return {
    // ...mapStateToProps
  };
};

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}DispatchProps => {
  return {
    // ...mapDispatchToProps
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(${1:ComponentName});

_tsrri : typescript react redux template with i18n support

import * as React from 'react';
import { InjectedI18nProps, InjectedTranslateProps, translate } from 'react-i18next';
import { connect } from 'react-redux';
import { AnyAction, Dispatch } from 'redux';

import i18ns from './i18n';

// Component

interface I${1:ComponentName}StateProps { }

interface I${1:ComponentName}DispatchProps { }

interface I${1:ComponentName}Props extends I${1:ComponentName}StateProps, I${1:ComponentName}DispatchProps, InjectedI18nProps, InjectedTranslateProps { }

interface I${1:ComponentName}State { }

export class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> {
  constructor(props: I${1:ComponentName}Props) {
    super(props);
    this.loadI18ns();
  }

  public loadI18ns() {
    const { i18n } = this.props;
    for (const key in i18ns) {
      if (i18ns.hasOwnProperty(key)) {
        i18n.addResourceBundle(key, '${1:ComponentName}', i18ns[key]);
      }
    }
  }

  public render() {
    const { t } = this.props;
    return (
      ${3:<span>{t('text')\\}</span>}
    );
  }
}

// Container

interface I${1:ComponentName}OwnProps { }

const mapStateToProps = (state: ${2:IGlobalState}, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}StateProps => {
  return {
    // ...mapStateToProps
  };
};

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, ownProps: I${1:ComponentName}OwnProps): I${1:ComponentName}DispatchProps => {
  return {
    // ...mapDispatchToProps
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(translate('${1:ComponentName}')(${1:ComponentName}));

_con : constructor

constructor(props: I${1:ComponentName}Props) {
  super(props);
  ${2}
}
${3}

_cwm : componentWillMount

public componentWillMount() {
  {1}
}
${2}

_cdm : componentDidMount

public componentDidMount() {
  {1}
}
${2}

_cwr : componentWillReceiveProps

public componentWillReceiveProps(nextProps: I${1:ComponentName}Props) {
  ${2}
}
${3}

_scup : shouldComponentUpdate

public shouldComponentUpdate(nextProps: I${1:ComponentName}Props, nextState: I${1:ComponentName}State): boolean {
  ${2}
  return true;
}
${3}

_cwup : componentWillUpdate

public componentWillUpdate(nextProps: I${1:ComponentName}Props, nextState: I${1:ComponentName}State) {
  ${2}
}
${3}

_cdup : componentDidUpdate

public componentDidUpdate(prevProps: I${1:ComponentName}Props, prevState: I${1:ComponentName}State) {
  ${2}
}
${3}

_cwun : componentWillUnmount

public componentWillUnmount() {
  {1}
}
${2}

Install

Launch VS Code Quick Open (⌘+P), paste the following command, and press enter.

ext install vscode-typescript-react-redux-snippets

Development

cd ~/.vscode/extensions
git clone https://github.com/Armour/vscode-typescript-react-redux-snippets
cd vscode-typescript-react-redux-snippets

This will load our snippets each time VS Code runs

Used projects

Armour/express-webpack-react-redux-typescript-boilerplate

Contributing

See CONTRIBUTING.md

License

MIT License