Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {
- /*
- // Place your snippets for JavaScript React 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"
- }
- */
- "Import react": {
- "prefix": "react",
- "body": [
- "import React from 'react';",
- "import PropTypes from 'prop-types';\n\n"
- ]
- },
- "Import CSS component styles": {
- "prefix": "styles",
- "body": "import styles from './${TM_FILENAME_BASE}.scss';\n\n"
- },
- "Create component": {
- "prefix": "comp",
- "body": [
- "class ${1:NewComponent} extends React.Component {",
- "\tstatic propTypes = {",
- "\t\t",
- "\t}",
- "",
- "\tconstructor(props) {",
- "\t\tsuper(props);",
- "\t\tthis.state = {",
- "\t\t\t",
- "\t\t};",
- "\t}",
- "",
- "\trender() {",
- "\t\treturn (",
- "\t\t\t<div>",
- "\t\t\t\t${0}",
- "\t\t\t</div>",
- "\t\t);",
- "\t}",
- "}",
- "",
- ],
- "description": "Creates react class component"
- },
- "Create pure component": {
- "prefix": "pcomp",
- "body": [
- "class ${1:NewComponent} extends React.PureComponent {",
- "\tconstructor(props) {",
- "\t\tsuper(props);",
- "\t\tthis.state = {",
- "\t\t\t${4}",
- "\t\t};",
- "\t}",
- "",
- "\trender() {",
- "\t\treturn (",
- "\t\t\t<div>",
- "\t\t\t\t${0}",
- "\t\t\t</div>",
- "\t\t);",
- "\t}",
- "}",
- "",
- "${1}.propTypes = {",
- "\t${2}",
- "};",
- "",
- "${1}.defaultProps = {",
- "\t${3}",
- "};\n",
- ],
- "description": "Create pure component"
- },
- "Create functional component": {
- "prefix": "fcomp",
- "body": [
- "const ${1:NewComponent} = ({${2}}) => {",
- "\treturn (",
- "\t\t<div>",
- "\t\t\t${0}",
- "\t\t</div>",
- "\t);",
- "};",
- "",
- "${1}.propTypes = {",
- "\t${3}",
- "};",
- "",
- "${1}.defaultProps = {",
- "\t${4}",
- "};\n",
- ],
- "description": "Create functional component"
- },
- "Create HOC": {
- "prefix": "hoc",
- "body": [
- "export function ${1:withHOC}(WrappedComponent) {",
- "\treturn class extends React.Component {",
- "\t\trender() {",
- "\t\t\treturn <WrappedComponent {...this.props} />",
- "\t\t}",
- "\t}",
- "}",
- ]
- }
- }
Add Comment
Please, Sign In to add comment