Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Nov 13th, 2018 88 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. {
  2.     "Stateless Functional Component": {
  3.         "prefix": "sfc",
  4.         "body": [
  5.             "import React from 'react';",
  6.             "import PropTypes from 'prop-types';",
  7.             "",
  8.             "function ${TM_FILENAME_BASE/(.*)\\..+$/$1/}({ children }) {",
  9.             "    return <div className=\"\">{children}</div>;",
  10.             "}",
  11.             "",
  12.             "${TM_FILENAME_BASE/(.*)\\..+$/$1/}.defaultProps = {};",
  13.             "",
  14.             "${TM_FILENAME_BASE/(.*)\\..+$/$1/}.propTypes = {};",
  15.             "",
  16.             "export default ${TM_FILENAME_BASE/(.*)\\..+$/$1/};"
  17.         ],
  18.         "description": "A stateless functional component"
  19.     },
  20.     "Class Component": {
  21.         "prefix": "cc",
  22.         "body": [
  23.             "import React, { Component } from 'react';",
  24.             "import PropTypes from 'prop-types';",
  25.             "",
  26.             "class ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/} extends Component {",
  27.             "    constructor(props) {",
  28.             "        super(props);",
  29.             "    }",
  30.             "",
  31.             "    render() {",
  32.             "        const { children } = this.props;",
  33.             "        return <div className=\"\">{children}</div>;",
  34.             "    }",
  35.             "}",
  36.             "",
  37.             "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.defaultProps = {};",
  38.             "",
  39.             "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.propTypes = {};",
  40.             "",
  41.             "export default ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/};"
  42.         ],
  43.         "description": "A class component"
  44.     },
  45.     "Connected Class Component": {
  46.         "prefix": "ccc",
  47.         "body": [
  48.             "import React, { Component } from 'react';",
  49.             "import PropTypes from 'prop-types';",
  50.             "import { connect } from 'react-redux';",
  51.             "",
  52.             "class ${TM_FILENAME_BASE/(.*)\\\\..+$/$1/} extends Component {",
  53.             "    constructor(props) {",
  54.             "        super(props);",
  55.             "    }",
  56.             "",
  57.             "    render() {",
  58.             "        const { children } = this.props;",
  59.             "        return <div className=\"\">{children}</div>;",
  60.             "    }",
  61.             "}",
  62.             "",
  63.             "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.defaultProps = {};",
  64.             "",
  65.             "${TM_FILENAME_BASE/(.*)\\\\..+$/$1/}.propTypes = {};",
  66.             "",
  67.             "function mapStateToProps(state) {",
  68.             "    return {};",
  69.             "}",
  70.             "",
  71.             "function mapDispatchToProps(state) {",
  72.             "    return {};",
  73.             "}",
  74.             "",
  75.             "export default connect(mapStateToProps, mapDispatchToProps)(${TM_FILENAME_BASE/(.*)\\\\..+$/$1/});"
  76.         ],
  77.         "description": "A connected class component"
  78.     },
  79.     "Unit test": {
  80.         "prefix": "jest",
  81.         "description": "Setup for a jest unit test",
  82.         "body": [
  83.             "import React from 'react';",
  84.             "import ${TM_FILENAME_BASE/(.*)\\..+$/$1/} from './${TM_FILENAME_BASE/(.*)\\..+$/$1/}';",
  85.             "import { shallow } from 'enzyme';",
  86.             "",
  87.             "describe('${TM_FILENAME_BASE/(.*)\\..+$/$1/}', () => {",
  88.             "    const defaultProps = {};",
  89.             "",
  90.             "    function renderComponent(props) {",
  91.             "        return shallow(<${TM_FILENAME_BASE/(.*)\\..+$/$1/} {...defaultProps} {...props} />);",
  92.             "    }",
  93.             "",
  94.             "    it('should render', () => {",
  95.             "        renderComponent({});",
  96.             "    });",
  97.             "});"
  98.         ]
  99.     },
  100.     "Unit test w/ Store": {
  101.         "prefix": "jestStore",
  102.         "description": "Setup for a jest unit test with redux",
  103.         "body": [
  104.             "import React from 'react';",
  105.             "import ${TM_FILENAME_BASE/(.*)\\..+$/$1/} from './${TM_FILENAME_BASE/(.*)\\..+$/$1/}';",
  106.             "import { shallow } from 'enzyme';",
  107.             "import configureMockStore from 'redux-mock-store';",
  108.             "import thunk from 'redux-thunk';",
  109.             "",
  110.             "describe('${TM_FILENAME_BASE/(.*)\\..+$/$1/}', () => {",
  111.             "    const defaultProps = {};",
  112.             "    const initialStoreState = {};",
  113.             "",
  114.             "    const middleware = [thunk];",
  115.             "    const mockStore = configureMockStore(middleware);",
  116.             "",
  117.             "    function renderComponent(props, storeState) {",
  118.             "        const store = mockStore({ ...initialStoreState, ...storeState });",
  119.             "        return shallow(<${TM_FILENAME_BASE/(.*)\\..+$/$1/} {...defaultProps} {...props} store={store} />).dive();",
  120.             "    }",
  121.             "",
  122.             "    it('should render', () => {",
  123.             "        renderComponent();",
  124.             "    });",
  125.             "});"
  126.         ]
  127.     },
  128.     "Reducer Template": {
  129.         "prefix": "reducer",
  130.         "description": "Its a reducer template",
  131.         "body": [
  132.             "import { $1 } from '$2'",
  133.             "",
  134.             "const initialState = {}",
  135.             "",
  136.             "export default function(state = initialState, action) {",
  137.             "    const { payload, type } = action",
  138.             "",
  139.             "    switch (type) {",
  140.             "        case $1:",
  141.             "            return { ...payload }",
  142.             "",
  143.             "        default:",
  144.             "            return state",
  145.             "    }",
  146.             "}"
  147.         ]
  148.     }
  149. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top