React Functional Component & React Functional Styled Component Snippets

rfc-rfsc

{
"reactFunctionalComponent": {
		"prefix": "rfc",
		"body": [
			"",
			"function ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}() {",
			"\treturn (",
			"\t\t<${1:${div}}>",
			"\t\t\t${2:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}",
			"\t\t</${1:${div}}>",
			"\t)",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}",
			""
		],
		"description": "Creates a React Functional Component with Styled Component"
	},
	"reactFunctionalStyledComponent": {
		"prefix": "rsfc",
		"body": [
			"import styled from 'styled-components'",
			"",
			"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Styled = styled.${1:div}`",
			"",
			"`",
			"",
			"function ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}() {",
			"\treturn (",
			"\t\t<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Styled>",
			"\t\t\t${2:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}",
			"\t\t</${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Styled>",
			"\t)",
			"}",
			"",
			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}",
			""
		],
		"description": "Creates a React Functional Component with Styled Component"
	},
}