VSCode-Typescript-React-Redux-forms-MUI-Snippets

Typescript, React, Redux and Material-UI snippets for VSCode.

Assuming you have a React app written in Typescript and using redux for state management, redux-form for forms duh, Material-UI for designs. This extension will increase your productivity and save time from typing repetitive scaffoldable codes.

Alt text

Snippets

Components

_tsrsfc : basic typescript SFC template

import * as React from 'react';

export interface StatelessProps {
  // props
}

const Stateless: React.SFC<StatelessProps> = props => {
  // const { props } = props;
  return <span>Body</span>;
};

export default Stateless;

_tsr : basic typescript react component template

import * as React from 'react';

interface IComponentNameProps {
  // props
}

interface IComponentNameState {
  // state
}

export default class ComponentName extends React.Component<IComponentNameProps, IComponentNameState> {
  public render() {
    return <span>Body</span>;
  }
}

_tsrm : typescript react component with MUI template

import * as React from 'react';
import { compose } from 'redux';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';

const styles = (theme: Theme) =>
  createStyles({
    // custom JSS
  });

interface IComponentNameProps {}

interface IComponentNameState {}

type IComponentNamePropsWithStyle = IComponentNameProps & WithStyles<typeof styles>;

class ComponentName extends React.Component<IComponentNameProps, IComponentNameState> {
  constructor(props: IComponentNamePropsWithStyle) {
    super(props);

    this.state = {
      // state
    };
    // event binding
  }

  public render() {
    const { classes } = this.props;
    return <span>Body</span>;
  }
}

export default compose(withStyles)(ComponentName);

_tsrri18 : typescript react redux template with i18n support

import * as React from 'react';
import { compose } from 'redux';
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import { InjectedTranslateProps, translate } from 'react-i18next';

const styles = (theme: Theme) =>
  createStyles({
    // custom JSS
  });

interface IComponentNameProps {
  // props
}

interface IComponentNameState {
  // state
}

type IComponentNamePropsWithStyle = IComponentNameProps & InjectedTranslateProps & WithStyles<typeof styles>;

class ComponentName extends React.Component<IComponentNameProps, IComponentNameState> {
  constructor(props: IComponentNamePropsWithStyle) {
    super(props);

    this.state = {
      // state
    };
    // event binding
  }

  public render() {
    const { t, classes } = this.props;
    return <span>Body</span>;
  }
}

export default compose(
  withStyles,
  translate
)(ComponentName);

Containers

_tsrr_ : basic typescript react redux container template

import { connect } from 'react-redux';
import { compose, Action, Dispatch } from 'redux';

interface IComponentNameOwnProps {
  // own props
}

const mapStateToProps = (state: IApplicationState, ownProps: IComponentNameOwnProps): IComponentNameStateProps => {
  return {
    // ...mapStateToProps
  };
};

const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: IComponentNameOwnProps): IComponentNameDispatchProps => {
  return {
    // ...mapDispatchToProps
  };
};

export default compose<React.ComponentType<IComponentNameOwnProps>>(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(ComponentName);

_tsrrf_: typescript react redux redux-form container template

import { connect } from 'react-redux';
import { compose, Action, Dispatch } from 'redux';
import { reduxForm, ConfigProps } from 'redux-form';

const reduxFormConfig: ConfigProps = {
  form: '', // Redux form id
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true,
  enableReinitialize: false,
};

interface IComponentNameOwnProps {
  // own props
}

const mapStateToProps = (state: IApplicationState, ownProps: IComponentNameOwnProps): IComponentNameStateProps => {
  return {
    // ...mapStateToProps
  };
};

const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: IComponentNameOwnProps): IComponentNameDispatchProps => {
  return {
    // ...mapDispatchToProps
  };
};

export default compose<React.ComponentType<IComponentNameOwnProps>>(
  connect<IComponentNameStateProps, IComponentNameDispatchProps, IComponentNameOwnProps, IApplicationState>(
    mapStateToProps,
    mapDispatchToProps
  ),
  reduxForm(reduxFormConfig)
)(ComponentName);

Life cycle

_con : constructor

constructor(props: IComponentNameProps) {
  super(props);

}

_cwm : componentDidMount
```
public componentDidMount() {

}
```

_cdm : shouldComponentUpdate

public shouldComponentUpdate(prevProps: Readonly<IComponentNameProps>, prevState: Readonly<IComponentNameState>): boolean {

  return true;
}

_gssbu : getSnapshotBeforeUpdate

public getSnapshotBeforeUpdate(prevProps: Readonly<IComponentNameProps>, prevState: Readonly<IComponentNameState>) {

  return null;
}

_cdc : componentDidCatch

public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
  //
}

_gdsfp : getDerivedStateFromProps

static getDerivedStateFromProps(nextProps: Readonly<IComponentNameProps>, prevState: IComponentNameState): Partial<IComponentNameState> {

  return {
    // derive your state here
  }
}

_cdup : componentDidUpdate

public componentDidUpdate(prevProps: IComponentNameProps, prevState: IComponentNameState) {
  //
}

_cwun : componentWillUnmount
```
public componentWillUnmount() {

}
```

Install

Option 1 Installing from VSCode marketplace

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

ext install vscode-ts-react-redux-mui-snippets

Option 2 Build from source

Install VSCode Extension Manager globally

npm i vsce -g

Clone and package

Clone this project
Run this in shell vsce package, note where is the generated vsix
Go to VSCode extensions tab, click on ellipsis, install from VSIX

Development

npm i vsce -g
cd ~/.vscode/extensions
git clone
cd vscode-typescript-react-redux-MUI-snippets
vsce package

Typescript React Redux forms MUI Snippets

Murugaratham