vscode-snippets/typescriptreact.json at main · wk1/vscode-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{

	"Init new ts react component": {
		"prefix": "_init",
		"body": [
		"import './style.scss';",
		"",
		"interface ${1:Component}Props {",
			"\tid?: string",
			"\tclassName?: string",
		"}",
		"",
		"export const ${1:Component} = ({ id, className }: ${1:Component}Props ) => {",
  		"\treturn (",
    		"\t\t<div id={id} className={className}>",
    			"\t\t\t$0",
    		"\t\t</div>",
  		"\t)",
		"}"
		],
		"description": "Initiate a new react component with ts typed props"
	},

	"Init new ts react component including demo": {
		"prefix": "_initD",
		"body": [
		"import './style.scss';",
		"import { Demo, Theme } from '../Demo';",
		"",
		"interface ${1:Component}Props {",
			"\tid?: string",
			"\tclassName?: string",
		"}",
		"",
		"export const ${1:Component} = ({ id, className }: ${1:Component}Props ) => {",
  		"\treturn (",
    		"\t\t<div id={id} className={className}>",
    			"\t\t\t$0",
    		"\t\t</div>",
  		"\t)",
		"}",
		"",
		"export const ${1:Component}Demo = () => {",

			"\treturn (",
				"\t\t<Demo",
					"\t\t\tcontent={",
						"\t\t\t\t<${1:Component} />",
					"\t\t\t}",
					"\t\t\t// config={",
						"\t\t\t\t",
					"\t\t\t// }",
					"\t\t\ttheme={Theme.dark}",
				"\t\t/>",
			"\t)",
		"}"
		],
		"description": "Initiate a new react component with ts typed props including a demo stage with config"
	},

	"Embed Selection in div with className": {
		"prefix": "_div",
		"body": [
		"<div className='${1:class-name}'>",
		"\t$TM_SELECTED_TEXT",
		"</div>"
		],
		"description": "Embeds selected code in a div"
	}
}