Commit 426b89e

authored

Merge pull request epilande#3 from epilande/styled-components

💅 Styled components snippet

2 parents 05dc658 + 6246013 commit 426b89eCopy full SHA for 426b89e

File tree

+38

-9

lines changed

+38

-9

lines changed

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -68,6 +68,8 @@ Check out [`UltiSnips/javascript.snippets`](UltiSnips/javascript.snippets) to se
`68`	`68`	\| `rrcc→` \| React Redux Class Component \|
`69`	`69`	\| `rcc→` \| React Class Component \|
`70`	`70`	\| `rfc→` \| React Functional Component \|
	`71`	+\| `rsc→` \| React Styled Component \|
	`72`	+\| `rsci→` \| React Styled Component Interpolation \|
`71`	`73`
`72`	`74`
`73`	`75`	`#### Lifecycle`
@@ -115,3 +117,4 @@ Check out [`UltiSnips/javascript.snippets`](UltiSnips/javascript.snippets) to se
`115`	`117`	\| `dp→` \| `defaultProps {...}` \|
`116`	`118`	\| `cn→` \| `className` \|
`117`	`119`	\| `ref→` \| `ref` \|
	`120`	+\| `pp→` \| `${props => props}` \|

Lines changed: 35 additions & 9 deletions

Original file line number	Diff line number	Diff line change
`@@ -61,21 +61,47 @@ snippet rfc "React Functional Component" b`
`61`	`61`	`import React, { PropTypes } from 'react';`
`62`	`62`	`import styles from './${2:1ドル}.css';`
`63`	`63`
`64`		-const ${1:`!v expand('%:t:r')`} = ({ ${3:...props} }) => (
`65`		`- <div className={styles.base}>`
`66`		`- 4ドル`
`67`		`- </div>`
`68`		`-);`
	`64`	+function ${1:`!v expand('%:t:r')`}(${3:{...props}}) {
	`65`	`+ return (`
	`66`	`+ <div className={styles.base}>`
	`67`	`+ 4ドル`
	`68`	`+ </div>`
	`69`	`+ );`
	`70`	`+}`
`69`	`71`
`70`		`-1ドル.defaultProps = {`
`71`		`-};`
	`72`	`+1ドル.defaultProps = {};`
`72`	`73`
`73`		`-1ドル.propTypes = {`
`74`		`-};`
	`74`	`+1ドル.propTypes = {};`
	`75`	`+`
	`76`	`+export default 1ドル;`
	`77`	`+endsnippet`
	`78`	`+`
	`79`	`+snippet rsc "React Styled Component" b`
	`80`	`+import styled from 'styled-components';`
	`81`	`+`
	`82`	+const ${1:`!v expand('%:t:r')`} = styled.${2:div}\`
	`83`	`+ 3ドル`
	`84`	+\`;
`75`	`85`
`76`	`86`	`export default 1ドル;`
`77`	`87`	`endsnippet`
`78`	`88`
	`89`	`+snippet rsci "React Styled Component Interpolation" b`
	`90`	`+import styled, { css } from 'styled-components';`
	`91`	`+`
	`92`	+const ${1:`!v expand('%:t:r')`} = styled.${2:div}\`${props => css\`
	`93`	+ ${3:${props.4ドル && \`
	`94`	`+ 5ドル`
	`95`	+ \`}}
	`96`	+\`}\`;
	`97`	`+`
	`98`	`+export default 1ドル;`
	`99`	`+endsnippet`
	`100`	`+`
	`101`	`+snippet pp "Get Props"`
	`102`	`+${props => props.${1}};`
	`103`	`+endsnippet`
	`104`	`+`
`79`	`105`	`snippet cn "className"`
`80`	`106`	`className="1ドル"`
`81`	`107`	`endsnippet`

Comments

(0)