735 lines
24 KiB
JSON
735 lines
24 KiB
JSON
{
|
|
"exportType": {
|
|
"body": ["export type ${1:first} = {${2:second}}"],
|
|
"prefix": "exptp"
|
|
},
|
|
"exportInterface": {
|
|
"prefix": "expint",
|
|
"body": ["export interface ${1:first} {${2:second}}"]
|
|
},
|
|
"reactArrowFunctionComponent": {
|
|
"prefix": "rafc",
|
|
"body": [
|
|
"export const ${1:${TM_FILENAME_BASE}} = () => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React Arrow Function Component with ES7 module system"
|
|
},
|
|
"reactArrowFunctionComponentWithPropTypes": {
|
|
"prefix": "rafcp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"",
|
|
"const ${1:${TM_FILENAME_BASE}} = props => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React Arrow Function Component with ES7 module system with PropTypes"
|
|
},
|
|
"reactArrowFunctionExportComponent": {
|
|
"prefix": "rafce",
|
|
"body": [
|
|
"const ${1:${TM_FILENAME_BASE}} = () => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React Arrow Function Component with ES7 module system"
|
|
},
|
|
"reactClassComponent": {
|
|
"prefix": "rcc",
|
|
"body": [
|
|
"import { Component } from 'react'",
|
|
"",
|
|
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React component class with ES7 module system"
|
|
},
|
|
"reactClassComponentPropTypes": {
|
|
"prefix": "rccp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { Component } from 'react'",
|
|
"",
|
|
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" static propTypes = {${2:second}: ${3:third}}",
|
|
"",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React component class with PropTypes and ES7 module system"
|
|
},
|
|
"reactClassComponentRedux": {
|
|
"prefix": "rcredux",
|
|
"body": [
|
|
"import { Component } from 'react'",
|
|
"import { connect } from 'react-redux'",
|
|
"",
|
|
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
"",
|
|
"const mapStateToProps = (state) => ({})",
|
|
"",
|
|
"const mapDispatchToProps = {}",
|
|
"",
|
|
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
|
|
],
|
|
"description": "Creates a React component class with connected redux and ES7 module system"
|
|
},
|
|
"reactClassComponentReduxPropTypes": {
|
|
"prefix": "rcreduxp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { Component } from 'react'",
|
|
"import { connect } from 'react-redux'",
|
|
"",
|
|
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" static propTypes = {",
|
|
" ${2:second}: ${3:third}",
|
|
" }",
|
|
"",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
"",
|
|
"const mapStateToProps = (state) => ({})",
|
|
"",
|
|
"const mapDispatchToProps = {}",
|
|
"",
|
|
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
|
|
],
|
|
"description": "Creates a React component class with PropTypes with connected redux and ES7 module system"
|
|
},
|
|
"reactClassExportComponent": {
|
|
"prefix": "rce",
|
|
"body": [
|
|
"import { Component } from 'react'",
|
|
"",
|
|
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React component class with ES7 module system"
|
|
},
|
|
"reactClassExportComponentWithPropTypes": {
|
|
"prefix": "rcep",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { Component } from 'react'",
|
|
"",
|
|
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
|
|
" static propTypes = {}",
|
|
"",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React component class with ES7 module system"
|
|
},
|
|
"reactClassExportPureComponent": {
|
|
"prefix": "rpce",
|
|
"body": [
|
|
"import { PureComponent } from 'react'",
|
|
"",
|
|
"export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React pure component class with ES7 module system export"
|
|
},
|
|
"reactClassPureComponent": {
|
|
"prefix": "rpc",
|
|
"body": [
|
|
"import { PureComponent } from 'react'",
|
|
"",
|
|
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React pure component class with ES7 module system"
|
|
},
|
|
"reactClassPureComponentWithPropTypes": {
|
|
"prefix": "rpcp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { PureComponent } from 'react'",
|
|
"",
|
|
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
|
|
" static propTypes = {}",
|
|
"",
|
|
" render() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
" }",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React component class with ES7 module system"
|
|
},
|
|
"reactFunctionMemoComponent": {
|
|
"prefix": "rmc",
|
|
"body": [
|
|
"import { memo } from 'react'",
|
|
"",
|
|
"const ${1:${TM_FILENAME_BASE}} = memo(() => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"})",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React Memo Function Component with ES7 module system"
|
|
},
|
|
"reactFunctionMemoComponentWithPropTypes": {
|
|
"prefix": "rmcp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { memo } from 'react'",
|
|
"",
|
|
"const ${1:${TM_FILENAME_BASE}} = memo((props) => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"})",
|
|
"",
|
|
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React Memo Function Component with ES7 module system with PropTypes"
|
|
},
|
|
"reactFunctionalComponent": {
|
|
"prefix": "rfc",
|
|
"body": [
|
|
"import React from 'react'",
|
|
"",
|
|
"export default function ${1:${TM_FILENAME_BASE}}() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
""
|
|
],
|
|
"description": "Creates a React Functional Component with ES7 module system"
|
|
},
|
|
"reactFunctionalComponentRedux": {
|
|
"prefix": "rfcredux",
|
|
"body": [
|
|
"import { connect } from 'react-redux'",
|
|
"",
|
|
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"const mapStateToProps = (state) => ({})",
|
|
"",
|
|
"const mapDispatchToProps = {}",
|
|
"",
|
|
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
|
|
],
|
|
"description": "Creates a React functional component with connected redux and ES7 module system"
|
|
},
|
|
"reactFunctionalComponentReduxPropTypes": {
|
|
"prefix": "rfcreduxp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"import { connect } from 'react-redux'",
|
|
"",
|
|
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"${1:${TM_FILENAME_BASE}}.propTypes = {",
|
|
" ${2:second}: PropTypes.${3:third}",
|
|
"}",
|
|
"",
|
|
"const mapStateToProps = (state) => ({})",
|
|
"",
|
|
"const mapDispatchToProps = {}",
|
|
"",
|
|
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
|
|
],
|
|
"description": "DEPRECATED: Creates a React functional component with PropTypes with connected redux and ES7 module system"
|
|
},
|
|
"reactFunctionalComponentWithPropTypes": {
|
|
"prefix": "rfcp",
|
|
"body": [
|
|
"import PropTypes from 'prop-types'",
|
|
"",
|
|
"function ${1:${TM_FILENAME_BASE}}(props) {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}",
|
|
""
|
|
],
|
|
"description": "Creates a React Functional Component with ES7 module system with PropTypes"
|
|
},
|
|
"reactFunctionalExportComponent": {
|
|
"prefix": "rfce",
|
|
"body": [
|
|
"function ${1:${TM_FILENAME_BASE}}() {",
|
|
" return (",
|
|
" <div>${1:first}</div>",
|
|
" )",
|
|
"}",
|
|
"",
|
|
"export default ${1:${TM_FILENAME_BASE}}"
|
|
],
|
|
"description": "Creates a React Functional Component with ES7 module system"
|
|
},
|
|
"useCallback": {
|
|
"prefix": "useCallbackSnippet",
|
|
"body": [
|
|
"useCallback(",
|
|
" () => {",
|
|
" ${1:first}",
|
|
" },",
|
|
" [${2:second}],",
|
|
")",
|
|
""
|
|
]
|
|
},
|
|
"useContext": {
|
|
"prefix": "useContextSnippet",
|
|
"body": ["const ${1:first} = useContext(${2:second})"]
|
|
},
|
|
"useEffect": {
|
|
"prefix": "useEffectSnippet",
|
|
"body": [
|
|
"useEffect(() => {",
|
|
" ${1:first}",
|
|
"",
|
|
" return () => {",
|
|
" ${2:second}",
|
|
" }",
|
|
"}, [${3:third}])",
|
|
""
|
|
]
|
|
},
|
|
"useImperativeHandle": {
|
|
"prefix": "useImperativeHandleSnippet",
|
|
"body": [
|
|
"useImperativeHandle(",
|
|
" ${1:first},",
|
|
" () => {",
|
|
" ${2:second}",
|
|
" },",
|
|
" [${3:third}],",
|
|
")"
|
|
]
|
|
},
|
|
"useLayoutEffect": {
|
|
"prefix": "useLayoutEffectSnippet",
|
|
"body": [
|
|
"useLayoutEffect(() => {",
|
|
" ${1:first}",
|
|
"",
|
|
" return () => {",
|
|
" ${2:second}",
|
|
" };",
|
|
"}, [${3:third}])"
|
|
]
|
|
},
|
|
"useMemo": {
|
|
"prefix": "useMemoSnippet",
|
|
"body": ["useMemo(() => ${1:first}, [${2:second}])"]
|
|
},
|
|
"useReducer": {
|
|
"prefix": "useReducerSnippet",
|
|
"body": [
|
|
"const [state, dispatch] = useReducer(${1:first}, ${2:second}, ${3:third})"
|
|
]
|
|
},
|
|
"useRef": {
|
|
"prefix": "useRefSnippet",
|
|
"body": ["const ${1:first} = useRef(${2:second})"]
|
|
},
|
|
"useState": {
|
|
"prefix": "useStateSnippet",
|
|
"body": [
|
|
"const [${1:first}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:second})"
|
|
]
|
|
},
|
|
"importPropTypes": {
|
|
"prefix": "impt",
|
|
"body": ["import PropTypes from 'prop-types'"]
|
|
},
|
|
"importReact": {
|
|
"prefix": "imr",
|
|
"body": ["import React from 'react'"]
|
|
},
|
|
"importReactDom": {
|
|
"prefix": "imrd",
|
|
"body": ["import ReactDOM from 'react-dom'"]
|
|
},
|
|
"importReactWithComponent": {
|
|
"prefix": "imrc",
|
|
"body": ["import React, { Component } from 'react'"]
|
|
},
|
|
"importReactWithComponentAndPropTypes": {
|
|
"prefix": "imrcp",
|
|
"body": [
|
|
"import React, { Component } from 'react'",
|
|
"import PropTypes from 'prop-types'",
|
|
""
|
|
]
|
|
},
|
|
"importReactWithMemo": {
|
|
"prefix": "imrm",
|
|
"body": ["import React, { memo } from 'react'"]
|
|
},
|
|
"importReactWithMemoAndPropTypes": {
|
|
"prefix": "imrmp",
|
|
"body": [
|
|
"import React, { memo } from 'react'",
|
|
"import PropTypes from 'prop-types'",
|
|
""
|
|
]
|
|
},
|
|
"importReactWithPureComponent": {
|
|
"prefix": "imrpc",
|
|
"body": ["import React, { PureComponent } from 'react'"]
|
|
},
|
|
"importReactWithPureComponentAndPropTypes": {
|
|
"prefix": "imrpcp",
|
|
"body": [
|
|
"import React, { PureComponent } from 'react'",
|
|
"import PropTypes from 'prop-types'",
|
|
""
|
|
]
|
|
},
|
|
"importRouterLink": {
|
|
"prefix": "imbrl",
|
|
"body": ["import { Link } from 'react-router-dom'"]
|
|
},
|
|
"importRouterNavLink": {
|
|
"prefix": "imbrnl",
|
|
"body": ["import { NavLink } from 'react-router-dom'"]
|
|
},
|
|
"importRouterSetup": {
|
|
"prefix": "imbrc",
|
|
"body": [
|
|
"import { Route, Switch, NavLink, Link } from 'react-router-dom'"
|
|
]
|
|
},
|
|
"importRouterSwitch": {
|
|
"prefix": "imbrs",
|
|
"body": ["import { Switch } from 'react-router-dom'"]
|
|
},
|
|
"propTypeArray": {
|
|
"prefix": "pta",
|
|
"body": ["PropTypes.array"],
|
|
"description": "Array prop type"
|
|
},
|
|
"propTypeArrayRequired": {
|
|
"prefix": "ptar",
|
|
"body": ["PropTypes.array.isRequired"],
|
|
"description": "Array prop type required"
|
|
},
|
|
"propTypeBool": {
|
|
"prefix": "ptb",
|
|
"body": ["PropTypes.bool"],
|
|
"description": "Bool prop type"
|
|
},
|
|
"propTypeBoolRequired": {
|
|
"prefix": "ptbr",
|
|
"body": ["PropTypes.bool.isRequired"],
|
|
"description": "Bool prop type required"
|
|
},
|
|
"propTypeFunc": {
|
|
"prefix": "ptf",
|
|
"body": ["PropTypes.func"],
|
|
"description": "Func prop type"
|
|
},
|
|
"propTypeFuncRequired": {
|
|
"prefix": "ptfr",
|
|
"body": ["PropTypes.func.isRequired"],
|
|
"description": "Func prop type required"
|
|
},
|
|
"propTypeNumber": {
|
|
"prefix": "ptn",
|
|
"body": ["PropTypes.number"],
|
|
"description": "Number prop type"
|
|
},
|
|
"propTypeNumberRequired": {
|
|
"prefix": "ptnr",
|
|
"body": ["PropTypes.number.isRequired"],
|
|
"description": "Number prop type required"
|
|
},
|
|
"propTypeObject": {
|
|
"prefix": "pto",
|
|
"body": ["PropTypes.object"],
|
|
"description": "Object prop type"
|
|
},
|
|
"propTypeObjectRequired": {
|
|
"prefix": "ptor",
|
|
"body": ["PropTypes.object.isRequired"],
|
|
"description": "Object prop type required"
|
|
},
|
|
"propTypeString": {
|
|
"prefix": "pts",
|
|
"body": ["PropTypes.string"],
|
|
"description": "String prop type"
|
|
},
|
|
"propTypeStringRequired": {
|
|
"prefix": "ptsr",
|
|
"body": ["PropTypes.string.isRequired"],
|
|
"description": "String prop type required"
|
|
},
|
|
"propTypeNode": {
|
|
"prefix": "ptnd",
|
|
"body": ["PropTypes.node"],
|
|
"description": "Anything that can be rendered: numbers, strings, elements or an array"
|
|
},
|
|
"propTypeNodeRequired": {
|
|
"prefix": "ptndr",
|
|
"body": ["PropTypes.node.isRequired"],
|
|
"description": "Anything that can be rendered: numbers, strings, elements or an array required"
|
|
},
|
|
"propTypeElement": {
|
|
"prefix": "ptel",
|
|
"body": ["PropTypes.element"],
|
|
"description": "React element prop type"
|
|
},
|
|
"propTypeElementRequired": {
|
|
"prefix": "ptelr",
|
|
"body": ["PropTypes.element.isRequired"],
|
|
"description": "React element prop type required"
|
|
},
|
|
"propTypeInstanceOf": {
|
|
"prefix": "pti",
|
|
"body": ["PropTypes.instanceOf($0)"],
|
|
"description": "Is an instance of a class prop type"
|
|
},
|
|
"propTypeInstanceOfRequired": {
|
|
"prefix": "ptir",
|
|
"body": ["PropTypes.instanceOf($0).isRequired"],
|
|
"description": "Is an instance of a class prop type required"
|
|
},
|
|
"propTypeEnum": {
|
|
"prefix": "pte",
|
|
"body": ["PropTypes.oneOf(['$0'])"],
|
|
"description": "Prop type limited to specific values by treating it as an enum"
|
|
},
|
|
"propTypeEnumRequired": {
|
|
"prefix": "pter",
|
|
"body": ["PropTypes.oneOf(['$0']).isRequired"],
|
|
"description": "Prop type limited to specific values by treating it as an enum required"
|
|
},
|
|
"propTypeOneOfType": {
|
|
"prefix": "ptet",
|
|
"body": ["PropTypes.oneOfType([", " $0", "])"],
|
|
"description": "An object that could be one of many types"
|
|
},
|
|
"propTypeOneOfTypeRequired": {
|
|
"prefix": "ptetr",
|
|
"body": ["PropTypes.oneOfType([", " $0", "]).isRequired"],
|
|
"description": "An object that could be one of many types required"
|
|
},
|
|
"propTypeArrayOf": {
|
|
"prefix": "ptao",
|
|
"body": ["PropTypes.arrayOf($0)"],
|
|
"description": "An array of a certain type"
|
|
},
|
|
"propTypeArrayOfRequired": {
|
|
"prefix": "ptaor",
|
|
"body": ["PropTypes.arrayOf($0).isRequired"],
|
|
"description": "An array of a certain type required"
|
|
},
|
|
"propTypeObjectOf": {
|
|
"prefix": "ptoo",
|
|
"body": ["PropTypes.objectOf($0)"],
|
|
"description": "An object with property values of a certain type"
|
|
},
|
|
"propTypeObjectOfRequired": {
|
|
"prefix": "ptoor",
|
|
"body": ["PropTypes.objectOf($0).isRequired"],
|
|
"description": "An object with property values of a certain type required"
|
|
},
|
|
"propTypeShape": {
|
|
"prefix": "ptsh",
|
|
"body": ["PropTypes.shape({", " $0", "})"],
|
|
"description": "An object taking on a particular shape"
|
|
},
|
|
"propTypeShapeRequired": {
|
|
"prefix": "ptshr",
|
|
"body": ["PropTypes.shape({", " $0", "}).isRequired"],
|
|
"description": "An object taking on a particular shape required"
|
|
},
|
|
"propTypeExact": {
|
|
"prefix": "ptex",
|
|
"body": ["PropTypes.exact({", " $0", "})"],
|
|
"description": "An object with warnings on extra properties"
|
|
},
|
|
"propTypeExactRequired": {
|
|
"prefix": "ptexr",
|
|
"body": ["PropTypes.exact({", " $0", "}).isRequired"],
|
|
"description": "An object with warnings on extra properties required"
|
|
},
|
|
"propTypeAny": {
|
|
"prefix": "ptany",
|
|
"body": ["PropTypes.any"],
|
|
"description": "Any prop type"
|
|
},
|
|
"destructProps": {
|
|
"prefix": "cp",
|
|
"body": ["const { ${1:first} } = this.props"],
|
|
"description": "Creates and assigns a local variable using props destructing"
|
|
},
|
|
"destructState": {
|
|
"prefix": "cs",
|
|
"body": ["const { ${1:first} } = this.state"],
|
|
"description": "Creates and assigns a local variable using state destructing"
|
|
},
|
|
"classConstructor": {
|
|
"prefix": "rconst",
|
|
"body": [
|
|
"constructor(props) {",
|
|
" super(props)",
|
|
"",
|
|
" this.state = {",
|
|
" ${1:first}",
|
|
" }",
|
|
"}"
|
|
],
|
|
"description": "Adds a default constructor for it('', () => {})the class that contains props as arguments"
|
|
},
|
|
"emptyState": {
|
|
"prefix": "est",
|
|
"body": ["state = { ${1:first} }"],
|
|
"description": "Creates empty state object. To be used in a constructor."
|
|
},
|
|
"componentDidMount": {
|
|
"prefix": "cdm",
|
|
"body": ["componentDidMount() { ${1:first} }"],
|
|
"description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
|
|
},
|
|
"shouldComponentUpdate": {
|
|
"prefix": "scu",
|
|
"body": ["shouldComponentUpdate(nextProps, nextState) { ${1:first} }"],
|
|
"description": "Invoked before rendering when new props or state are being received. "
|
|
},
|
|
"componentDidUpdate": {
|
|
"prefix": "cdup",
|
|
"body": ["componentDidUpdate(prevProps, prevState) { ${1:first}} "],
|
|
"description": "Invoked immediately after the component's updates are flushed to the DOM."
|
|
},
|
|
"componentWillUnmount": {
|
|
"prefix": "cwun",
|
|
"body": ["componentWillUnmount() {${1:first} }"],
|
|
"description": "Invoked immediately before a component is unmounted from the DOM."
|
|
},
|
|
"getDerivedStateFromProps": {
|
|
"prefix": "gdsfp",
|
|
"body": ["static getDerivedStateFromProps(props, state) {${1:first}}"],
|
|
"description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates."
|
|
},
|
|
"getSnapshotBeforeUpdate": {
|
|
"prefix": "gsbu",
|
|
"body": [
|
|
"getSnapshotBeforeUpdate = (prevProps, prevState) => {${1:first}}"
|
|
],
|
|
"description": "Called right before mutations are made (e.g. before the DOM is updated)"
|
|
},
|
|
"createContext": {
|
|
"prefix": "rcontext",
|
|
"body": ["const ${1:first} = React.createContext()"],
|
|
"description": "Create React context"
|
|
},
|
|
"createRef": {
|
|
"prefix": "cref",
|
|
"body": ["this.${1:first}Ref = React.createRef()"],
|
|
"description": "Create ref statement used inside constructor"
|
|
},
|
|
"componentSetStateObject": {
|
|
"prefix": "sst",
|
|
"body": ["this.setState({${1:first}})"],
|
|
"description": "Performs a shallow merge of nextState into current state"
|
|
},
|
|
"componentSetStateFunc": {
|
|
"prefix": "ssf",
|
|
"body": ["this.setState((state, props) => { return { ${1:first} }})"],
|
|
"description": "Performs a shallow merge of nextState into current state"
|
|
},
|
|
"componentProps": {
|
|
"prefix": "props",
|
|
"body": ["this.props.${1:first}"],
|
|
"description": "Access component's props"
|
|
},
|
|
"componentState": {
|
|
"prefix": "state",
|
|
"body": ["this.state.${1:first}"]
|
|
},
|
|
"bindThis": {
|
|
"prefix": "bnd",
|
|
"body": ["this.${1:first} = this.${1:first}.bind(this)"],
|
|
"description": "Binds this to a method"
|
|
}
|
|
}
|