RunningCoderLee / reactsjs-snippets

A set of react snippets for VS Code

📝 VS Code React snippets

This extension provides you React/Redux snippets for VS Code

📚 Supported languages (file extensions)

• JavaScript (.js)
• JavaScript React (.jsx)
• TypeScript (.ts)
• TypeScript React (.tsx)

📖 Snippets

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

React Component

Lifecycle

trigger	snippet(JS)	snippet(TS)
rcns⇥	constructor(props) { super(props) this.state = { } }	constructor(props: Props) { super(props) this.state = { } }
cdm⇥	componentDidMount() { }	componentDidMount(): void { }
cdu⇥	componentDidUpdate(prevProps, prevState, snapshot) { }	componentDidUpdate(prevProps: Props, prevState: State, snapshot: any): void { }
cdc⇥	componentDidCatch(error, info) { }	componentDidCatch(error: Error, info: ErrorInfo): void { }
cwu⇥	componentWillUnmount() { }	componentWillUnmount(): void { }
scu⇥	shouldComponentUpdate(nextProps, nextState) { }	shouldComponentUpdate(nextProps: Props, nextState: State): boolean { }
gdsfp⇥	static getDerivedStateFromProps(nextProps, prevState){ }	static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): Partial<State> | null { }
gdsfe⇥	static getDerivedStateFromError(error){ }	static getDerivedStateFromError(error: any): Partial<State> | null { }
gsbu⇥	getSnapshotBeforeUpdate(prevProps, prevState){ }	getSnapshotBeforeUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): SnapShot | null { }
ren⇥	render(){ }	render(): React.ReactNode { }

Class Properties

trigger	snippet(JS)	snippet(TS)
cdp⇥	Component.defaultProps = { }	Component.defaultProps = { }

Instance Properties

trigger	snippet(JS)	snippet(TS)
thp⇥	this.props.	this.props.
ths⇥	this.state.	this.state.

Refs

trigger	snippet(JS)	snippet(TS)
cref⇥	this.nameRef = React.createRef()	this.nameRef = React.createRef<Type>()
fcref⇥	const nameRef = React.createRef()	const nameRef = React.createRef<Type>()

Context

trigger	snippet(JS)	snippet(TS)
cct⇥	const contextName = React.createContext(defaultValue)	const contextName = React.createContext<Type>(defaultValue)
ctp⇥	<Context.Provider value="value"> </Context.Provider>	<Context.Provider value="value"> </Context.Provider>
ctc⇥	<Context.Consumer> {value => ()} </Context.Consumer>	<Context.Consumer> {value => ()} </Context.Consumer>

Others

trigger	snippet(JS)	snippet(TS)
ss⇥	this.setState({})	this.setState({})
ssu⇥	this.setState((state, props) => { return {stateChange} })	this.setState((state, props) => { return {stateChange} })

Skeleton

rcc⇥

JS

import React, { |PureComponent,Component| } from 'react'

class FileName extends |PureComponent,Component| {
  constructor(props) {
    super(props)

    this.state = {
      
    }
  }

  render() {
    return (
      
    )
  }
}

export default FileName

TS

import React, { |PureComponent,Component|, ReactNode } from 'react'

interface Props {}
interface State {}

class FileName extends |PureComponent,Component|<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      
    }
  }

  render(): ReactNode {
    return (
      
    )
  }
}

export default FileName

rccp⇥

JS

import React, { |PureComponent,Component| } from 'react'
import PropTypes from 'prop-types'

class FileName extends |PureComponent,Component| {
  constructor(props) {
    super(props)

    this.state = {

    }
  }

  render() {
    return (

    )
  }
}

export default FileName

rfc⇥

JS

import React from 'react'

function FileName() {
  return (

  )
}

export default FileName

TS

import React from 'react'

interface Props {}

function FileName(props: Props) {
  const {} = props

  return (
    
  )
}

export default FileName

rfcp⇥

JS

import React from 'react'
import PropTypes from 'prop-types'

function FileName(props) {
  const {} = props

  return (

  )
}

FileName.propTypes = {

}

export default FileName

rfmc⇥

JS

import React, { memo } from 'react'

function FileName() {
  return (
    
  )
}

export default memo(FileName)

TS

import React, { memo } from 'react'

interface Props {}

function FileName(props: Props) {
  const {} = props

  return (
    
  )
}

export default memo(FileName)

rfmcp⇥

JS

import React, { memo } from 'react'
import PropTypes from 'prop-types'

function FileName(props) {
  const {} = props

  return (
    
  )
}

FileName.propTypes = {}

export default memo(FileName)

rccrdx⇥

JS

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

class FileName extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {

    }
  }

  render() {
    return (

    )
  }
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

TS

import React, { |PureComponent,Component| } from 'react'
import { connect } from 'react-redux'

interface Props {}
interface State {}

class FileName extends |PureComponent,Component|<Props, State> {
  constructor(props) {
    super(props)

    this.state = {
      
    }
  }

  render() {
    return (
      
    )
  }
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rccprdx⇥

JS

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class FileName extends PureComponent {
  static propTypes = {

  }

  constructor(props) {
    super(props)

    this.state = {

    }
  }

  render() {
    return (

    )
  }
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfcrdx⇥

JS

import React from 'react'
import { connect } from 'react-redux'

function FileName() {
  return (

  )
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

TS

import React from 'react'
import { connect } from 'react-redux'

interface Props {}

function FileName(props: Props) {
  const {} = props

  return (

  )
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfcprdx⇥

JS

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

function FileName(props) {
  const {} = props

  return (

  )
}

FileName.propTypes = {
  
}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(FileName)

rfmcrdx⇥

JS

import React, { memo } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

function FileName() {
  return (

  )
}

FileName.propTypes = {

}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))

TS

import React, { memo } from 'react'
import { connect } from 'react-redux'

interface Props {}

function FileName(props: Props) {
  const {} = props

  return (

  )
}

FileName.propTypes = {

}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))

rfmcprdx⇥

JS

import React, { memo } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

function FileName(props) {
  const {} = props

  return (

  )
}

FileName.propTypes = {}

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(memo(FileName))