React TS and JS Snippets

Javascript and Typescript snippets to boost productivity in React development for vscode. This is a work in progress, more snippets will be added in the near future.

Examples

Example of functional component in TS.

functional component

Example of functional component with useState hook in TS.

functional component with state

List of snippets

Typescript (TS)

Prefix	Description
`tfc→`	functional component
`tfcs→`	functional component with useState hook
`tp→`	add interface for component props
`tret→`	return of component template
`rust`	use state hook typed

Javascript (JS)

Prefix	Description
`rfc→`	React functional component
`rfcp→`	React functional component, without props (cleaner)

TS and JS

Prefix	Description
`cb`	Curly braces with input inside, spaced `{ input }`
`rim→`	Import statement with curly braces
`ri→`	Import statement without curly braces
`ris→`	Import styled components
`rfm→`	functional component method
`rsc→`	Styled Component initialization: `const $StyledComponent = styled.$tag`
`rus→`	Use state hook
`rue→`	Use effect hook
`ruc→`	Use context hook
`ruch→`	Custom hook statement
`rid→`	Import statement for ReactDom
`rin→`	Import for react native
`rst→`	`const styles = {}`, often used in react native
`rdst→`	destructuring of styles: `const { } = styles`
`/**→`	long comment for documentation purposes `/ some comment /`

NeXt TS

Prefix	Description
`tssp→`	server-side props function
`tsp→`	static props function
`tgp→`	static paths function

React TS & JS snippets

Vasco Rebolo