• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

atom-typescript-react-redux-snippets

Typescript React Redux snippets (follow ES6 standard)
  • #typescript
  • #react
  • #redux
  • #snippets
  • #es6
Armour
1.0.0 2,198
0
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

Atom-Typescript-React-Redux-Snippets

CircleCI devDependencies Status PRs Welcome License: MIT Template from jarvis

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

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by