Last active
October 15, 2017 21:36
-
-
Save trulysinclair/9b83099ad13e7ed556b28ac6fe3cfa74 to your computer and use it in GitHub Desktop.
Create a TypeScript React Component, as well as templates for conditional statements for the `shouldComponentUpdate` function.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"If True": { | |
"prefix": "iftrue", | |
"body": ["if (${1:statement} !== ${2:statement}) {", "\treturn true", "}"], | |
"description": "Create an `if` `true`, `return` `true` statement for react components" | |
}, | |
"If Not True": { | |
"prefix": "ifnottrue", | |
/* Here we use lodash.isequal within our component setup. It helps with deep validation. */ | |
"body": ["if (!${1|IsEqual(),statement|}) {", "\treturn${2| true, |}", "}"], | |
"description": "Create an `if` `notTrue` `return` or `return true` statement for react components" | |
}, | |
"If False": { | |
"prefix": "iffalse", | |
"body": ["if (!${1}) {", "\treturn false", "}"], | |
"description": "Create an `if` `false` `return` `false` statement for react components" | |
}, | |
"New Component": { | |
"prefix": "ncom", | |
"body": [ | |
"import * as React from 'react'", | |
"import * as ClassNames from 'classnames'", | |
"import { IBaseProps } from '../lib/base-props'", | |
"import './$2.css'", | |
"", | |
"interface I${1:App}Props extends IBaseProps {", | |
"\t/** The user-defined classes */", | |
"}", | |
"", | |
"interface I$1State {", | |
"\t/** Add your states here */", | |
"}", | |
"", | |
"export class $1 extends React.Component<I$1Props, I$1State> {", | |
"\tpublic constructor(props: I$1Props) {", | |
"\t\tsuper(props)", | |
"\t}", | |
"", | |
"\tpublic componentWillMount() {}", | |
"", | |
"\tpublic componentDidMount() {}", | |
"", | |
"\tpublic componentWillReceiveProps(nextProps: I$1Props) {}", | |
"", | |
"\tpublic shouldComponentUpdate(nextProps: I$1Props, nextState: I$1State) {", | |
"\t\treturn true", | |
"\t}", | |
"", | |
"\tpublic componentWillUpdate(nextProps: I$1Props, nextState: I$1State) {}", | |
"", | |
"\tpublic componentDidUpdate(prevProps: I$1Props, prevState: I$1State) {}", | |
"", | |
"\tpublic componentWillUnmount() {}", | |
"", | |
"\tpublic render() {", | |
"\t\tconst className = ClassNames('${2:app}')", | |
"\t\treturn (", | |
"\t\t\t<div className={className}>", | |
"\t\t\t\t<div id=\"$2\" />", | |
"\t\t\t</div>", | |
"\t\t)", | |
"\t}", | |
"}" | |
], | |
"description": "Create a brand new component" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment