daily pastebin goal
1%
SHARE
TWEET

Untitled

a guest Dec 7th, 2017 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. {
  2. /*
  3.     // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
  4.     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  5.     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  6.     // same ids are connected.
  7.     // Example:
  8.     "Print to console": {
  9.         "prefix": "log",
  10.         "body": [
  11.             "console.log('$1');",
  12.             "$2"
  13.         ],
  14.         "description": "Log output to console"
  15.     }
  16. */
  17.   "React Class Component": {
  18.     "prefix": "react_class_component",
  19.     "body": [
  20.       "import React, { Component } from 'react';",
  21.       "class CCOMPONET extends Component {",
  22.       "  render() {",
  23.       "    return (",
  24.       "$0",
  25.       "    );",
  26.       "  };",
  27.       "}",
  28.       "export default CCOMPONET;"
  29.     ],
  30.     "description": "Create Generic Class"
  31.   },
  32.   "React Functional Component": {
  33.     "prefix": "react_functional_component",
  34.     "body": [
  35.       "import React from 'react';",
  36.       "const FCOMPONET = () => {",
  37.       "  return (",
  38.       "$0",
  39.       "  );",
  40.       "}",
  41.       "export default FCOMPONET;"
  42.     ],
  43.     "description": "Create Functional Component"
  44.   },
  45.   "React Component Will Mount": {
  46.     "prefix": "react_component_will_mount",
  47.     "body": [
  48.       "componentWillMount() {",
  49.       "  $0",
  50.       "}"
  51.     ],
  52.     "description": "React Component Will Mount"
  53.   },
  54.   "React Component Did Mount": {
  55.     "prefix": "react_component_did_mount",
  56.     "body": [
  57.       "componentDidMount() {",
  58.       "  $0",
  59.       "}"
  60.     ],
  61.     "description": "React Component Did Mount"
  62.   },
  63.   "React MouseMove": {
  64.     "prefix": "react_on_mouse_move",
  65.     "body": [
  66.       "onDocumentMouseMove(event) {",
  67.       "  $0",
  68.       "}"
  69.     ],
  70.     "description": "React MouseMove Listener"
  71.   },
  72.   "React TouchStart": {
  73.     "prefix": "react_on_touch_start",
  74.     "body": [
  75.       "onDocumentTouchStart(event) {",
  76.       "  $0",
  77.       "}"
  78.     ],
  79.     "description": "React TouchStart Listener"
  80.   },
  81.   "React TouchMove": {
  82.     "prefix": "react_on_touch_move",
  83.     "body": [
  84.       "onDocumentTouchMove(event) {",
  85.       "  $0",
  86.       "}"
  87.     ],
  88.     "description": "React TouchMove Listener"
  89.   },
  90.   "Styled Div": {
  91.     "prefix": "styled_div",
  92.     "body": [
  93.       "const StyledDiv = styled.div`$0`"
  94.     ],
  95.     "description": "Styled Div"
  96.   },
  97.   "Next Router": {
  98.     "prefix": "next_router",
  99.     "body": [
  100.       "const routes = (module.exports = require('next-routes')())",
  101.       "routes",
  102.       "  .add('index', '/')"
  103.     ],
  104.     "description": "Next Js Basic Router"
  105.   },
  106.   "Next Server": {
  107.     "prefix": "next_server",
  108.     "body": [
  109.       "require('dotenv').config()",
  110.       "const next = require('next')",
  111.       "const routes = require('./routes')",
  112.       "const app = next({ dev: process.env.NODE_ENV !== 'production' })",
  113.       "const handler = routes.getRequestHandler(app)",
  114.       "const express = require('express')",
  115.       "app.prepare().then(() => {",
  116.       "  console.log(process.env.TEST)",
  117.       "  express()",
  118.       "    .use(handler)",
  119.       "    .listen(3000)",
  120.       "})"
  121.     ],
  122.     "description": "Next Js Server"
  123.   },
  124.   "Next Page": {
  125.     "prefix": "next_page",
  126.     "body": [
  127.       "import React, { Component, PureComponent } from 'react'",
  128.       "import withRedux from 'next-redux-wrapper'",
  129.       "import { bindActionCreators } from 'redux'",
  130.       "import styled from 'styled-components'",
  131.       "import Page from '../components/shared/Page'",
  132.       "",
  133.       "class Index extends Component {",
  134.       "  render() {",
  135.       "    return (",
  136.       "      <div/>$0",
  137.       "    )",
  138.       "  }",
  139.       "}",
  140.       "",
  141.       "export default withRedux(",
  142.       "  initStore,",
  143.       "  state => {",
  144.       "    return {}",
  145.       "  },",
  146.       "  dispatch => {",
  147.       "    return {}",
  148.       "  }",
  149.       ")(Index)"
  150.     ],
  151.     "description": "BootStrap Next.js Page"
  152.   },
  153.   "Next Three Js": {
  154.     "prefix": "next_three_js",
  155.     "body": [
  156.       "import React, { Component, PureComponent } from 'react'",
  157.       "import Page from '../components/shared/Page'",
  158.       "import styled from 'styled-components'",
  159.       "import React3 from 'react-three-renderer'",
  160.       "import * as THREE from 'three'",
  161.       "import ReactDOM from 'react-dom'",
  162.       "import { initStore } from '../state'",
  163.       "import withRedux from 'next-redux-wrapper'",
  164.       "import { bindActionCreators } from 'redux'",
  165.       "class Index extends Component {",
  166.       "  constructor(props, context) {",
  167.       "    super(props, context);",
  168.       "    this.cameraPosition = new THREE.Vector3(0, 0, 5);",
  169.       "    this.state = {",
  170.       "      cubeRotation: new THREE.Euler(),",
  171.       "    };",
  172.       "    this._onAnimate = () => {",
  173.       "      this.setState({",
  174.       "        cubeRotation: new THREE.Euler(",
  175.       "          this.state.cubeRotation.x + 0.1,",
  176.       "          this.state.cubeRotation.y + 0.1,",
  177.       "          0",
  178.       "        ),",
  179.       "      });",
  180.       "    };",
  181.       "  }",
  182.       "  render() {",
  183.       "    const {",
  184.       "      width,",
  185.       "      height,",
  186.       "    } = this.props;",
  187.       "    return (",
  188.       "      <React3",
  189.       "        mainCamera='camera' // this points to the perspectiveCamera below",
  190.       "        width={width}",
  191.       "        height={height}",
  192.       "",
  193.       "        onAnimate={this._onAnimate}",
  194.       "      >",
  195.       "        <scene>",
  196.       "          <perspectiveCamera",
  197.       "            name='camera'",
  198.       "            fov={75}",
  199.       "            aspect={width / height}",
  200.       "            near={0.1}",
  201.       "            far={1000}",
  202.       "",
  203.       "            position={this.cameraPosition}",
  204.       "          />",
  205.       "          <mesh",
  206.       "            rotation={this.state.cubeRotation}",
  207.       "          >",
  208.       "            <boxGeometry",
  209.       "              width={1}",
  210.       "              height={1}",
  211.       "              depth={1}",
  212.       "            />",
  213.       "            <meshBasicMaterial",
  214.       "              color={0x00ff00}",
  215.       "            />",
  216.       "          </mesh>",
  217.       "        </scene>",
  218.       "      </React3>",
  219.       "    );",
  220.       "  }",
  221.       "}",
  222.       "export default withRedux(",
  223.       "  initStore,",
  224.       "  state => {",
  225.       "    return {}",
  226.       "  },",
  227.       "  dispatch => {",
  228.       "    return {}",
  229.       "  }",
  230.       ")(Index)"
  231.     ],
  232.     "description": "Next Js Basic ThreeJS Implementation"
  233.   }
  234. }
RAW Paste Data
Top