Skip to content

Instantly share code, notes, and snippets.

@velopert
Created January 16, 2019 10:08
Show Gist options
  • Save velopert/26849916f76c361f16389e4cf610f860 to your computer and use it in GitHub Desktop.
Save velopert/26849916f76c361f16389e4cf610f860 to your computer and use it in GitHub Desktop.
TypeScript React Code snippet
{
"Object Destructure from this.props": {
"prefix": "odprops",
"body": ["const { ${1:value} } = this.props;"],
"description": ""
},
"Re-export": {
"prefix": "rexp",
"body": [
"export { default as ${1:MyComponent} } from './${1:MyComponent}';"
],
"description": ""
},
"Re-export as default": {
"prefix": "rexpd",
"body": ["export { default } from './${1:MyComponent}';"],
"description": ""
},
"Create Typed Functional Component": {
"prefix": "rsc",
"body": [
"import * as React from 'react';",
"import './${1:${TM_FILENAME_BASE}}.scss';",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {}",
"",
"const ${1:${TM_FILENAME_BASE}}: React.SFC<${1:${TM_FILENAME_BASE}}Props> = props => {",
" return <div className=\"${1:${TM_FILENAME_BASE}}\">${1:${TM_FILENAME_BASE}}</div>;",
"};",
"",
"export default ${1:${TM_FILENAME_BASE}};",
""
],
"description": ""
},
"Get injected props": {
"prefix": "gip",
"body": [
"get injected() {",
" return this.props as InjectedProps;",
" }"
]
},
"Create Class Component": {
"prefix": "rcc",
"body": [
"import * as React from 'react';",
"${2:import './${TM_FILENAME_BASE}.scss';}",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {}",
"",
"class ${1:${TM_FILENAME_BASE}} extends React.Component<${1:${TM_FILENAME_BASE}}Props> {",
" public render() {",
" return <div>${1:${TM_FILENAME_BASE}}</div>;",
" }",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}};",
""
],
"description": ""
},
"inject from root store": {
"prefix": "ijr",
"body": ["@inject(({ }: RootStore) => ({}))"],
"description": ""
},
"Created styled stateless component": {
"prefix": "scrsc",
"body": [
"import * as React from 'react';",
"import styled from 'styled-components';",
"",
"const ${TM_FILENAME_BASE}Wrapper = styled.div``;",
"",
"interface ${TM_FILENAME_BASE}Props {}",
"const ${TM_FILENAME_BASE}: React.SFC<${TM_FILENAME_BASE}Props> = props => {",
" return <AppTemplateWrapper />;",
"};",
"",
"export default ${TM_FILENAME_BASE};",
""
],
"description": ""
},
"tsrsc": {
"prefix": "tsrsc",
"body": [
"import * as React from 'react';",
"import styled from 'styled-components';",
"",
"const ${1:${TM_FILENAME_BASE}}Block = styled.div``;",
"",
"interface ${1:${TM_FILENAME_BASE}}Props {}",
"",
"const ${1:${TM_FILENAME_BASE}}: React.SFC<${1:${TM_FILENAME_BASE}}Props> = props => {",
" return <${1:${TM_FILENAME_BASE}}Block></${1:${TM_FILENAME_BASE}}Block>;",
"};",
"",
"export default ${1:${TM_FILENAME_BASE}};",
""
],
"description": ""
},
"Test React Code": {
"prefix": "tstreact",
"body": [
"import React from 'react';",
"import { shallow, ShallowWrapper } from 'enzyme';",
"import ${1:ComponentName} from './${1:ComponentName}';",
"",
"describe('${1:ComponentName}', () => {",
" let component: ShallowWrapper | null = null;",
" it('renders correctly', () => {",
" component = shallow(<${1:ComponentName} />);",
" });",
" it('matches snapshot', () => {",
" expect(component).toMatchSnapshot();",
" });",
"});",
""
],
"description": ""
},
"Create TypeScript React Class Component": {
"prefix": "tsrcc",
"body": [
"import * as React from 'react';",
"",
"interface ${1:ComponentName}Props {}",
"interface ${1:ComponentName}State {}",
"",
"class ${1:ComponentName} extends React.Component<${1:ComponentName}Props, ${1:ComponentName}State> {",
" render() {",
" return null;",
" }",
"}",
"",
"export default ${1:ComponentName};",
""
],
"description": ""
},
"Create TypeScript React Redux Container Class Component": {
"prefix": "tsreduxcc",
"body": [
"import * as React from 'react';",
"import { connect } from 'react-redux';",
"import { RootState } from '../../store';",
"",
"interface OwnProps {}",
"interface StateProps {}",
"interface DispatchProps {}",
"interface ${1:${TM_FILENAME_BASE}}Props extends OwnProps, StateProps, DispatchProps {}",
"interface ${1:${TM_FILENAME_BASE}}State {}",
"",
"class ${1:${TM_FILENAME_BASE}} extends React.Component<${1:${TM_FILENAME_BASE}}Props, ${1:${TM_FILENAME_BASE}}State> {",
" render() {",
" return null;",
" }",
"}",
"",
"export default connect<StateProps, DispatchProps, OwnProps, RootState>(",
" state => ({}),",
" {},",
")(${1:${TM_FILENAME_BASE}});",
""
],
"description": ""
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment