Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {
- "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": ""
- }
- }
Add Comment
Please, Sign In to add comment