Snippets React

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
    // }

    "Basic input field" : {
        "prefix" : "field",
        "body" : [
            "<div class=\"Field\">",
                "\t<label class=\"Field__Label\" for=\"$1\">$2</label>",
                "\t<input class=\"Field__Input\" name=\"$1\" type=\"text\" placeholder=\"$3\">",
            "</div>"
        ],
        "description": "Basic input field with labels"
    },

    "Axios ajax get request": {
        "prefix" : "axiosg",
        "body" : [
            "axios({",
                "\tmethod: 'get',",
                "\turl: '/$1',",
                "\tdata: {",
                    "\t\t$2",
                "\t}",
            "})",
            ".then(response => {",
                "\tconsole.log(response);",
            "})",
            ".catch(error => {",
                "\tconsole.log(error);",
            "});"
        ],
        "description": "Simple axios get request with config"
    },

    "Axios ajax post request": {
        "prefix" : "axiosp",
        "body" : [
            "axios({",
                "\tmethod: 'post',",
                "\turl: '/$1',",
                "\tdata: {",
                    "\t\t$2",
                "\t}",
            "})",
            ".then(response => {",
                "\tconsole.log(response);",
            "})",
            ".catch(error => {",
                "\tconsole.log(error);",
            "});"
        ],
        "description": "Simple axios post request with config"
    },

    "Button with button tag" : {
        "prefix" : "bbutton",
        "body" : [
            "<button class=\"Button--${1:primary}\" type=\"button\">${2}</button>"
        ],
        "description": "Basic input field with labels"
    },

    "Submit with button tag" : {
        "prefix" : "bsubmit",
        "body" : [
            "<button id=\"${1:buttonSubmit}\" class=\"Button--${2:submit}\" type=\"submit\">${3:text}</button>"
        ],
        "description": "Basic input field with labels"
    },

    "Form template" : {
        "prefix" : "fcomp",
        "body" : [
            "<form class=\"Form\" action=\"$1\">",
                "\t",
                "\t<div class=\"Form__Header\">",
                    "\t\t<div class=\"Header__Text\">",
                        "\t\t\t<h3 class=\"Form__Title\"></h3>",
                        "\t\t\t<p class=\"Form__Subtitle\"></p>",
                    "\t\t</div>",
                    "\t\t<div class=\"Header__Action\">",
                        "\t\t\t<button class=\"Button--primary\" type=\"button\"></button>",
                    "\t\t</div>",
                "\t</div>",
                "\t",
                "\t<div class=\"Form__Body\">",
                "\t",
                "\t</div>",
                "\t",
                "\t<div class=\"Form__Footer\">",
                    "\t\t<div class=\"Footer__Text\">",
                    "\t\t",
                    "\t\t</div>",
                    "\t\t<div class=\"Footer__Action\">",
                        "\t\t\t<button id=\"buttonSubmit\" class=\"Button--submit\" type=\"submit\">Submit form</button>",
                    "\t\t</div>",
                "\t</div>",
                "\t",
            "</form>"
        ],
        "description": "Basic form template with header, body, and footer"
    },

    "Simple react components": {
        "prefix": "recomp",
        "body": [
        "import styles from './${TM_FILENAME_BASE}.module.scss';",
        "import React, { Component } from 'react';",
        "import classnames from 'classnames';",
        "",
        "class ${TM_FILENAME_BASE} extends Component {",
            "\trender() {",
                "\t\treturn (",
                    "\t\t\t<div>",
                    "\t\t\t\t${0:Write your component here}",
                    "\t\t\t</div>",
                "\t\t);",
            "\t}",
        "}",
        "",
        "export default ${TM_FILENAME_BASE};",
        ],
        "description": "Simple react components"
    },

    "Simple react stateless components": {
      "prefix": "reless",
      "body": [
      "import styles from './${TM_FILENAME_BASE}.module.scss';",
      "import React from 'react';",
      "import classnames from 'classnames';",
      "",
      "const ${TM_FILENAME_BASE} = ({",
        "\t${1:Another props},",
        "\tclassName,",
        "\t...restProps",
        "\t}) => {",
          "\treturn (",
            "\t\t<div>",
            "\t\t\t${1:Write your component here}",
            "\t\t</div>",
          "\t);",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};",
      ],
      "description": "Simple react stateless components"
  },

    "Simple react scss import": {
      "prefix": "impcss",
      "body": [
      "@import 'src/tokens';",
      "",
      ".root {",
        "\t${0:Write your component here}",
      "}"
      ],
      "description": "Simple react scss import from src"
  }



}