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