Armour / atom-typescript-react-redux-snippets

👨‍💻 Typescript, React and Redux snippets for Atom (followed ES6 standard)

Atom-Typescript-React-Redux-Snippets

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

Snippets

• _tsr : basic typescript react template

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

• _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 {}
  
  type I${1:ComponentName}ComponentProps = I${1:ComponentName}StateProps & I${1:ComponentName}DispatchProps;
  
  interface I${1:ComponentName}ComponentState {}
  
  class ${1:ComponentName}Component extends React.Component<I${1:ComponentName}ComponentProps, I${1:ComponentName}ComponentState> {
    public render() {
      return (
        ${3:<span>Body</span>}
      );
    }
  }
  
  // Container
  
  interface I${1:ComponentName}Props {}
  
  const mapStateToProps = (state: ${2:IGlobalState}, ownProps: I${1:ComponentName}Props): I${1:ComponentName}StateProps => {
        return {
            // ...mapStateToProps
        };
    };
  
  const mapDispatchToProps = (dispatch: Dispatch<AnyAction>, ownProps: I${1:ComponentName}Props): I${1:ComponentName}DispatchProps => {
        return {
            // ...mapDispatchToProps
        };
    };
  
    export default connect(
        mapStateToProps,
        mapDispatchToProps,
  )(${1:ComponentName}Component);

• _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

Search for atom-typescript-react-redux-snippets in Install page

Install and Restart Atom

Development

cd ~/.atom/packages
git clone https://github.com/Armour/atom-typescript-react-redux-snippets
cd atom-typescript-react-redux-snippets
apm install
apm link

Contributing

See CONTRIBUTING.md

License

MIT License