styled component snippets

javascript.json

{
  "react-import": {
    "prefix": "ir",
    "body": "import React from 'react'"
  },
  "styled-components import": {
    "prefix": "st",
    "body": ["import styled from 'styled-components'", "$1"]
  },
  "styled-components file template": {
    "prefix": "scf",
    "body": [
      "import React from 'react'",
      "import styled from 'styled-components'\n",
      "export const ${TM_FILENAME_BASE}Wrapper = styled.div``\n",
      "const ${TM_FILENAME_BASE} = (props) => {",
      "\treturn (",
      "\t\t<${TM_FILENAME_BASE}Wrapper>$0</${TM_FILENAME_BASE}Wrapper>",
      "\t)",
      "}",
      "\nexport default ${TM_FILENAME_BASE}"
    ],
    "description": "react styled-components filename structure component template"
  },
    "styled-components directory template": {
    "prefix": "scd",
    "body": [
      "import React from 'react'",
      "import styled from 'styled-components'\n",
      "export const ${TM_DIRECTORY/.*\\\\(.*)$/$1/}Wrapper = styled.div``\n",
      "const ${TM_DIRECTORY/.*\\\\(.*)$/$1/} = (props) => {",
      "\treturn (",
      "\t\t<${TM_DIRECTORY/.*\\\\(.*)$/$1/}Wrapper>$0</${TM_DIRECTORY/.*\\\\(.*)$/$1/}Wrapper>",
      "\t)",
      "}",
      "\nexport default ${TM_DIRECTORY/.*\\\\(.*)$/$1/}"
    ],
    "description": "react styled-components directory structure component template"
  },
  "styled-components global style": {
    "prefix": "glb",
    "body": [
      "import { createGlobalStyle } from 'styled-components'",
      "import normalize from 'styled-normalize'\n",
      "const GlobalStyle = createGlobalStyle`",
      "\t\\${normalize}\n",
      "\thtml {",
      "\t\tbox-sizing: border-box;",
      "\t}\n",
      "\t*, *:before, *:after {",
      "\t\tbox-sizing: inherit;",
      "\t}\n",
      "\tbody {",
      "\t\t$1",
      "\t}",
      "`\n",
      "export default GlobalStyle"
    ],
    "description": "react styled-components global style component"
  },
  "styled-components theme": {
    "prefix": "thm",
    "body": [
      "const theme = {",
      "\tprimary: '',",
      "\tsecondary: '',",
      "\twhite: '#FFFFFF',",
      "\tblack: '#333333',",
      "\tgrey: [",
      "\t\t'#FAFAFA',",
      "\t\t'#F2F2F2',",
      "\t\t'#E6E5E5',",
      "\t\t'#D9D8D8',",
      "\t\t'#CDCCCB',",
      "\t\t'#C0BFBF',",
      "\t\t'#B3B2B2',",
      "\t\t'#A7A5A5',",
      "\t\t'#9A9898',",
      "\t\t'#817E7E',",
      "\t\t'#747272',",
      "\t\t'#676565',",
      "\t\t'#5A5858',",
      "\t\t'#4D4C4C',",
      "\t\t'#403F3F'",
      "\t]",
      "}\n",
      "export default theme"
    ],
    "description": "react styled-components theme starter"
  }
}