a convenient React component snippet!

.vscode/impress-2020.code-snippets

@@ -0,0 +1,32 @@
+{
+  // Place your impress-2020 workspace 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"
+  // }
+  "Component file": {
+    "scope": "javascript",
+    "prefix": "component",
+    "body": [
+      "import React from \"react\";",
+      "import { Box } from \"@chakra-ui/core\";",
+      "",
+      "function $TM_FILENAME_BASE() {",
+      "  return <Box>$1</Box>;",
+      "}",
+      "",
+      "export default $TM_FILENAME_BASE;"
+    ]
+  }
+}