Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {
- /*
- // Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
- // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
- // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
- // same ids are connected.
- // Example:
- "Print to console": {
- "prefix": "log",
- "body": [
- "console.log('$1');",
- "$2"
- ],
- "description": "Log output to console"
- }
- */
- "React Class Component": {
- "prefix": "react_class_component",
- "body": [
- "import React, { Component } from 'react';",
- "class CCOMPONET extends Component {",
- " render() {",
- " return (",
- "$0",
- " );",
- " };",
- "}",
- "export default CCOMPONET;"
- ],
- "description": "Create Generic Class"
- },
- "React Functional Component": {
- "prefix": "react_functional_component",
- "body": [
- "import React from 'react';",
- "const FCOMPONET = () => {",
- " return (",
- "$0",
- " );",
- "}",
- "export default FCOMPONET;"
- ],
- "description": "Create Functional Component"
- },
- "React Component Will Mount": {
- "prefix": "react_component_will_mount",
- "body": [
- "componentWillMount() {",
- " $0",
- "}"
- ],
- "description": "React Component Will Mount"
- },
- "React Component Did Mount": {
- "prefix": "react_component_did_mount",
- "body": [
- "componentDidMount() {",
- " $0",
- "}"
- ],
- "description": "React Component Did Mount"
- },
- "React MouseMove": {
- "prefix": "react_on_mouse_move",
- "body": [
- "onDocumentMouseMove(event) {",
- " $0",
- "}"
- ],
- "description": "React MouseMove Listener"
- },
- "React TouchStart": {
- "prefix": "react_on_touch_start",
- "body": [
- "onDocumentTouchStart(event) {",
- " $0",
- "}"
- ],
- "description": "React TouchStart Listener"
- },
- "React TouchMove": {
- "prefix": "react_on_touch_move",
- "body": [
- "onDocumentTouchMove(event) {",
- " $0",
- "}"
- ],
- "description": "React TouchMove Listener"
- },
- "Styled Div": {
- "prefix": "styled_div",
- "body": [
- "const StyledDiv = styled.div`$0`"
- ],
- "description": "Styled Div"
- },
- "Next Router": {
- "prefix": "next_router",
- "body": [
- "const routes = (module.exports = require('next-routes')())",
- "routes",
- " .add('index', '/')"
- ],
- "description": "Next Js Basic Router"
- },
- "Next Server": {
- "prefix": "next_server",
- "body": [
- "require('dotenv').config()",
- "const next = require('next')",
- "const routes = require('./routes')",
- "const app = next({ dev: process.env.NODE_ENV !== 'production' })",
- "const handler = routes.getRequestHandler(app)",
- "const express = require('express')",
- "app.prepare().then(() => {",
- " console.log(process.env.TEST)",
- " express()",
- " .use(handler)",
- " .listen(3000)",
- "})"
- ],
- "description": "Next Js Server"
- },
- "Next Page": {
- "prefix": "next_page",
- "body": [
- "import React, { Component, PureComponent } from 'react'",
- "import withRedux from 'next-redux-wrapper'",
- "import { bindActionCreators } from 'redux'",
- "import styled from 'styled-components'",
- "import Page from '../components/shared/Page'",
- "",
- "class Index extends Component {",
- " render() {",
- " return (",
- " <div/>$0",
- " )",
- " }",
- "}",
- "",
- "export default withRedux(",
- " initStore,",
- " state => {",
- " return {}",
- " },",
- " dispatch => {",
- " return {}",
- " }",
- ")(Index)"
- ],
- "description": "BootStrap Next.js Page"
- },
- "Next Three Js": {
- "prefix": "next_three_js",
- "body": [
- "import React, { Component, PureComponent } from 'react'",
- "import Page from '../components/shared/Page'",
- "import styled from 'styled-components'",
- "import React3 from 'react-three-renderer'",
- "import * as THREE from 'three'",
- "import ReactDOM from 'react-dom'",
- "import { initStore } from '../state'",
- "import withRedux from 'next-redux-wrapper'",
- "import { bindActionCreators } from 'redux'",
- "class Index extends Component {",
- " constructor(props, context) {",
- " super(props, context);",
- " this.cameraPosition = new THREE.Vector3(0, 0, 5);",
- " this.state = {",
- " cubeRotation: new THREE.Euler(),",
- " };",
- " this._onAnimate = () => {",
- " this.setState({",
- " cubeRotation: new THREE.Euler(",
- " this.state.cubeRotation.x + 0.1,",
- " this.state.cubeRotation.y + 0.1,",
- " 0",
- " ),",
- " });",
- " };",
- " }",
- " render() {",
- " const {",
- " width,",
- " height,",
- " } = this.props;",
- " return (",
- " <React3",
- " mainCamera='camera' // this points to the perspectiveCamera below",
- " width={width}",
- " height={height}",
- "",
- " onAnimate={this._onAnimate}",
- " >",
- " <scene>",
- " <perspectiveCamera",
- " name='camera'",
- " fov={75}",
- " aspect={width / height}",
- " near={0.1}",
- " far={1000}",
- "",
- " position={this.cameraPosition}",
- " />",
- " <mesh",
- " rotation={this.state.cubeRotation}",
- " >",
- " <boxGeometry",
- " width={1}",
- " height={1}",
- " depth={1}",
- " />",
- " <meshBasicMaterial",
- " color={0x00ff00}",
- " />",
- " </mesh>",
- " </scene>",
- " </React3>",
- " );",
- " }",
- "}",
- "export default withRedux(",
- " initStore,",
- " state => {",
- " return {}",
- " },",
- " dispatch => {",
- " return {}",
- " }",
- ")(Index)"
- ],
- "description": "Next Js Basic ThreeJS Implementation"
- }
- }
Add Comment
Please, Sign In to add comment