vim-react-snippets

A collection of common Javascript and Typescript vim snippets for developing React applications. The snippets within this repo rely on UltiSnips as the snippet provider.

Installation

I recommend using a package manager such as vim-plug to install your vim packages.

call plug#begin('~/.vim/plugged')
Plug 'SirVer/ultisnips'
Plug 'mlaursen/vim-react-snippets'
call plug#end()

You can always see my full .vimrc for my Javascript/Typescript configuration and setup.

Javascript Example

Typescript Example

Hooks Example

Table of Contents

• Cheatsheet
  • PropTypes
  • Class Components (Javascript)
    • React Class Export
    • React Class Component
    • React Class Constructor
    • Static PropTypes
    • Static Default Props
    • React Class Function (arrow bound class function)
  • Function Components (Javascript)
    • Function Component Export
    • Simple Function Component Export
    • Forwarded Function Component Export
    • Component PropTypes
    • Component Default Props
  • React Lifecycle (Javascript)
    • Get Derived State from props
    • Get Derived state from Error
    • Component Did Mount
    • Should Component Update
    • Get Snapshot Before Update
    • Component Did Update
    • Component Did Catch
    • Component Will Unmount
  • Hooks and Effects (Javascript)
    • useState
    • useEffect
    • useEffect async
    • useContext
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperitiveHandle
    • useLayoutEffect
    • useDebugValue
  • General Redux (Javascript)
    • mirrored const
    • useDispatch
    • useSelector
  • Redux Toolkit (Javascript)
    • createSlice
    • export createSlice
    • create prepare reducer
    • createAsyncThunk
  • General Built-Ins (Javascript)
    • jsdoc comment
  • Class Components (Typescript)
    • React Class Export
    • React Class Export with Prop interface
    • React Class Export with Props and State
    • React Class Component
    • React Class Constructor
    • Static PropTypes
    • Static Default Props
    • Static Default Props Typed
    • React Class Function (arrow bound class function)
  • Function Components (Typescript)
    • Function Component Export
    • Function Component Default Export
    • Simple Function Component Export
    • Simple Function Component Default Export
    • Forwarded Function Component Export
    • Forwarded Function Component Default Export
    • Component PropTypes
    • Component Default Props
    • Component Default Props Typed
  • React Lifecycle (Typescript)
    • Get Derived State from props
    • Get Derived state from Error
    • Component Did Mount
    • Should Component Update
    • Get Snapshot Before Update
    • Component Did Update
    • Component Did Catch
    • Component Will Unmount
  • React Event Types (Typescript Only)
  • General Redux (Typescript)
    • mirrored const
    • useDispatch
    • useAppDispatch (Typescript Only)
    • useSelector
    • useAppSelector (Typescript Only)
    • Ref (Typescript Only)
    • MutableRefObject (Typescript Only)
    • RefCallback (Typescript Only)
  • Redux Toolkit (Typescript)
    • createSlice
    • export createSlice
    • create prepare reducer
    • createAsyncThunk
  • Hooks and Effects (Typescript)
    • useState
    • useEffect
    • useEffect async
    • useContext
    • useReducer
    • useReducer Untyped
    • useCallback
    • useMemo
    • useRef
    • useImperitiveHandle
    • useLayoutEffect
    • useDebugValue
  • General Built-Ins (Typescript)
    • reduce to type (Typescript Only)
    • jsdoc comment
  • Importing
  • Exporting
  • Logging
  • NODE_ENV
  • Tests (Javascript and Typescript)
    • React Test File
    • React Hooks Test File
    • Describe a test
    • it should...
    • it should (async)...
    • Test todo
    • expect snapshot

Cheatsheet

I will list the current supported snippets below and their implementation. I recommend checking out the full source files in the UltiSnips folder to see the full tabstop locations. The examples below will use $TABSTOP or $NAME to indicate that there is a tabstop or a tabbable/replaceable variable. Finally, if you see $CFN or $CFN_, it will be the Current File Name (the trailing underscore will not be included, it is just added to show separation when something else follows it).

PropTypes

Shortcut	Expands To
pt.a	React.PropTypes.array
pt.ar	React.PropTypes.array.isRequired
pt.b	React.PropTypes.bool
pt.br	React.PropTypes.bool.isRequired
pt.f	React.PropTypes.func
pt.fr	React.PropTypes.func.isRequired
pt.nu	React.PropTypes.number
pt.nur	React.PropTypes.number.isRequired
pt.o	React.PropTypes.object
pt.or	React.PropTypes.object.isRequired
pt.s	React.PropTypes.string
pt.sr	React.PropTypes.string.isRequired
pt.no	React.PropTypes.node
pt.nor	React.PropTypes.node.isRequired
pt.e	React.PropTypes.element
pt.er	React.PropTypes.element.isRequired
pt.ao	React.PropTypes.arrayOf
pt.aor	React.PropTypes.arrayOf.isRequired
pt.io	React.PropTypes.instanceOf
pt.ior	React.PropTypes.instanceOf.isRequired
pt.oo	React.PropTypes.objectOf
pt.oor	React.PropTypes.objectOf.isRequired
pt.sh	React.PropTypes.shape
pt.shr	React.PropTypes.shape.isRequired

Class Components (Javascript)

React Class Export

rce ->

import React, { Component } from "react"

export default class $CFN extends Component {
  constuctor(props) {
    super(props)

    this.state = {}
  }

  render() {
    return null
  }
}

React Class Component

rcc ->

class $CFN extends Component {
  render() {
    return null
  }
}

React Class Constructor

rcon ->

constructor(props) {
  super(props)

  this.state = {}
}

Static PropTypes

spt ->

static propTypes = {
  $TABSTOP
}

Static Default Props

sdp ->

static defaultProps = {
  $TABSTOP
}

React Class Function (arrow bound class function)

rcf ->

$TABSTOP = ($TABSTOP) => {
  $TABSTOP
}

Function Components (Javascript)

Function Component Export

fce ->

import React from "react"

const $CFN = (props) => {
  return null
}

export default $CFN

Simple Function Component Export

sfce ->

import React from "react"

const $CFN = () => {
  return null
}

export default $CFN

Forwarded Function Component Export

ffce ->

import React, { forwardRef } from "react"

const $CFN = forwardRef(function $CFN(props, ref) {
  return <div ref={ref}></div>
})

export default $CFN

Component PropTypes

cpt ->

$CFN.propTypes = {
  $TABSTOP,
}

Component Default Props

cdp ->

$CFN.defaultProps = {
  $TABSTOP,
}

React Lifecycle (Javascript)

Get Derived State from props

gds ->

static getDerivedStateFromProps(nextProps, prevState) {
  return null
}

Get Derived state from Error

gde ->

static getDerivedStateFromError(error) {
  return null
}

Component Did Mount

cdm ->

componentDidMount() {
  $TABSTOP
}

Should Component Update

scu ->

shouldComponentUpdate(nextProps, nextState) {
  $TABSTOP
}

Get Snapshot Before Update

gsbu ->

getSnapshotBeforeUpdate(prevProps, prevState) {
  $TABSTOP
}

Component Did Update

cdu ->

componentDidUpdate(prevProps, prevState, $SNAPSHOT) {
  $TABSTOP
}

Component Did Catch

cdc ->

componentDidCatch(error, info) {
  $TABSTOP
}

Component Will Unmount

cwum ->

componentWillUnmount() {
  $TABSTOP
}

Hooks and Effects (Javascript)

useState

useS ->

const [$STATE, set$STATE] = useState($TABSTOP)

useEffect

useE ->

useEffect(() => {
  $TABSTOP
}, [$TABSTOP])

useEffect async

useEA ->

useEffect(() => {
  let cancelled = false

  ;(async function $DOWORK() {
    // async work here
    $TABSTOP
    if (cancelled) {
      return
    }

    $TABSTOP
  })()

  return () => {
    cancelled = true
  }
}, [$TABSTOP])

useContext

useC ->

const context = useContext($TABSTOP)

or inline:

return useC ->

return useContext($TABSTOP)

useReducer

useRed ->

const [$STATE, $DISPATCH] = useReducer($REDUCER, $NULL)

useCallback

useCB ->

const $CALLBACK = useCallback(($TABSTOP) => {
  $TABSTOP
}, [$TABSTOP])

useMemo

useM ->

const $MEMOIZED = useMemo(() => {
  $TABSTOP
}, [$TABSTOP])

useRef

useR ->

const $REF = useRef($TABSTOP)

useImperitiveHandle

useI ->

useImperitiveHandle($REF, () => ({
  $TABSTOP,
}), [$TABSTOP])

useLayoutEffect

useL ->

useLayoutEffect(() => {
  $TABSTOP
}, [$TABSTOP])

useDebugValue

useDV ->

useDebugValue($NULL)

General Redux (Javascript)

mirrored const

mc ->

const $THING = "$THING"

useDispatch

useD ->

const dispatch = useDispatch()

or inline:

const dispatch = useD ->

const dispatch = useDispatch()

useSelector

useSL ->

const $VALUE = useSelector(($STATE) => $SELECTOR)

or inline:

const checked = useSL ->

const checked = useSelector(($STATE) => $SELECTOR)

Redux Toolkit (Javascript)

createSlice

cs ->

const { actions, reducer } = createSlice({
  name: "$CFN",
  initialState: $TABSTOP,
  reducers: {
    $TABSTOP,
  },
})

export createSlice

esc ->

import { createSlice } from "@reduxjs/toolkit"

const { actions, reducer } = createSlice({
  name: "$CFN",
  initialState: $TABSTOP,
  reducers: {
    $TABSTOP,
  },
})

export const { $TABSTOP } = actions

export default reducer

create prepare reducer

cpr ->

$TABSTOP: {
	reducer(state, action) {
		$$TABSTOP
	},
	prepare($TABSTOP) {
		return { payload: { $TABSTOP } }
	}
}

createAsyncThunk

cat ->

export const $TABSTOP = createAsyncThunk("$TABSTOP", async ($TABSTOP) => {
  $TABSTOP
})

or inline:

export const doThing = cat ->

export const doThing = createAsyncThunk("$TABSTOP", async ($TABSTOP) => {
  $TABSTOP
})

General Built-Ins (Javascript)

jsdoc comment

/** ->

/**
 * $TABEND
 */

Class Components (Typescript)

React Class Export

rce ->

import React, { Component } from "react"

export default class $CFN extends Component {
  public render() {
    return null
  }
}

React Class Export with Prop interface

rcep ->

import React, { Component } from "react"

export interface $CFN_Props {}

export default class $CFN extends Component<$CFN_Props> {
  public render() {
    return null
  }
}

React Class Export with Props and State

rceps ->

import React, { Component } from "react"

export interface $CFN_Props {}

export interface $CFN_State {}

export default class $CFN extends Component<$CFN_Props, $CFN_State> {
  constructor(props: $CFN_Props) {
    super(props)

    this.state = {}
  }

  public render() {
    return null
  }
}

React Class Component

rcc ->

class $CFN extends Component {
  public render() {
    return null
  }
}

React Class Constructor

rcon ->

constructor(props: $CFN_Props) {
  super(props)

  this.state = {}
}

Static PropTypes

spt ->

public static propTypes = {
  $TABSTOP
}

Static Default Props

sdp ->

public static defaultProps = {
  $TABSTOP
}

Static Default Props Typed

sdpt ->

public static defaultProps: DefaultProps = {
  $TABSTOP
}

React Class Function (arrow bound class function)

rcf ->

$TABSTOP = ($TABSTOP) => {
  $TABSTOP
}

Function Components (Typescript)

Note: These are different than the Javascript versions on purpose and use the function syntax instead of a "const + arrow function".

Function Component Export

fce ->

import React, { ReactElement } from "react"

export interface $CFN_Props {}

export function $CFN(props: $CFN_Props): ReactElement | null {
  return null
}

Function Component Default Export

fcde ->

import React, { ReactElement } from "react"

export interface $CFN_Props {}

export default function $CFN(props: $CFN_Props): ReactElement | null {
  return null
}

Simple Function Component Export

sfce ->

import React, { ReactElement } from "react"

export function $CFN(): ReactElement | null {
  return null
}

Simple Function Component Default Export

sfcde ->

import React, { ReactElement } from "react"

export default function $CFN(): ReactElement | null {
  return null
}

Forwarded Function Component Export

ffce ->

import React, { forwardRef } from "react"

export interface $CFNProps {
  $TABSTOP
}

export const $CFN = forwardRef<HTML$TABSTOPElement, $CFN_Props>(function $CFN(
  props,
  ref
) {
  return <div ref={ref}></div>
})

Forwarded Function Component Default Export

ffcde ->

import React, { forwardRef } from "react"

export interface $CFNProps {
  $TABSTOP
}

export default forwardRef<HTML$TABSTOPElement, $CFN_Props>(function $CFN(
  props,
  ref
) {
  return <div ref={ref}></div>
})

Component PropTypes

cpt ->

$CFN.propTypes = {
  $TABSTOP,
}

Component Default Props

cdp ->

$CFN.defaultProps = {
  $TABSTOP,
}

Component Default Props Typed

cdpt ->

const defaultProps: DefaultProps = {
  $TABSTOP,
}

$CFN.defaultProps = defaultProps

React Lifecycle (Typescript)

Get Derived State from props

gds ->

static getDerivedStateFromProps(nextProps: $CFN_Props, prevState: $CFN_State) {
  return null
}

Get Derived state from Error

gde ->

static getDerivedStateFromError(error: Error) {
  return null
}

Component Did Mount

cdm ->

componentDidMount() {
  $TABSTOP
}

Should Component Update

scu ->

shouldComponentUpdate(nextProps: $CFN_Props, nextState: $CFN_State) {
  $TABSTOP
}

Get Snapshot Before Update

gsbu ->

getSnapshotBeforeUpdate(prevProps: $CFN_Props, prevState: $CFN_State) {
  $TABSTOP
}

Component Did Update

cdu ->

componentDidUpdate(prevProps: $CFN_Props, prevState: $CFN_State, $SNAPSHOT) {
  $TABSTOP
}

Component Did Catch

cdc ->

componentDidCatch(error: Error, info: ErrorInfo) {
  $TABSTOP
}

Component Will Unmount

cwum ->

componentWillUnmount() {
  $TABSTOP
}

React Event Types (Typescript Only)

Shortcut	Expands to
me	event: MouseEvent<HTMLButtonElement>
te	event: TouchEvent<HTMLButtonElement>
ke	event: KeyboardEvent<HTMLInputElement>
che	event: ChangeEvent<HTMLInputElement>
fe	event: FocusEvent<HTMLElement>
foe	event: FormEvent<HTMLInputElement>
meh	MouseEventHandler<HTMLButtonElement>
teh	TouchEventHandler<HTMLButtonElement>
keh	KeyboardEventHandler<HTMLInputElement>
cheh	ChangeEventHandler<HTMLInputElement>
feh	FocusEventHandler<HTMLInputElement>
foeh	FormEventHandler<HTMLElement>

Note: The event: and Button/Input parts are a tabstop which can be removed or changed.

General Redux (Typescript)

mirrored const

mc ->

const $THING = "$THING"

useDispatch

useDS ->

const dispatch: $AppDispatch = useDispatch()

useAppDispatch (Typescript Only)

useD ->

const dispatch = useAppDispatch()

or inline:

const dispatch = useD ->

const dispatch = useAppDispatch()

useSelector

useSL ->

const $VALUE = useSelector(($STATE: AppState) => $SELECTOR)

or inline:

const checked = useSL ->

const checked = useSelector(($STATE: AppState) => $SELECTOR)

useAppSelector (Typescript Only)

useAS ->

const $VALUE = useAppSelector(($STATE) => $SELECTOR)

or inline:

const checked = useAS ->

const checked = useAppSelector(($STATE: AppState) => $SELECTOR)

Ref<E | null> (Typescript Only)

reft ->

export type $TABSTOP = Ref<$TABSTOP_Element | null>

or inline:

export type SomeRef = reft ->

export type SomeRef = Ref<$TABSTOP_Element | null>

MutableRefObject<E | null> (Typescript Only)

mro ->

export type $TABSTOP = MutableRefObject<$TABSTOP_Element | null>

or inline:

export type SomeRef = mro ->

export type SomeRef = MutableRefObject<$TABSTOP_Element | null>

RefCallback<E | null> (Typescript Only)

refcb ->

export type $TABSTOP = RefCallback<$TABSTOP_Element | null>

or inline:

export type SomeRef = refcb ->

export type SomeRef = RefCallback<$TABSTOP_Element | null>

Redux Toolkit (Typescript)

createSlice

cs ->

const { actions, reducer } = createSlice({
  name: "$CFN",
  initialState: $TABSTOP,
  reducers: {
    $TABSTOP,
  },
})

export createSlice

ecs ->

import { createSlice } from "@reduxjs/toolkit"

const { actions, reducer } = createSlice({
  name: "$CFN",
  initialState: $TABSTOP,
  reducers: {
    $TABSTOP,
  },
})

export const { $TABSTOP } = actions

export default reducer

create prepare reducer

cpr ->

$TABSTOP: {
	reducer(state, action: $PayloadAction<$TABSTOP>) {
		$$TABSTOP
	},
	prepare($TABSTOP) {
		return { payload: { $TABSTOP } }
	}
}

createAsyncThunk

cat ->

export const $TABSTOP = createAsyncThunk("$TABSTOP", async ($TABSTOP) => {
  $TABSTOP
})

or inline:

export const doThing = cat ->

export const doThing = createAsyncThunk("$TABSTOP", async ($TABSTOP) => {
  $TABSTOP
})

Hooks and Effects (Typescript)

useState

useS ->

const [$STATE, set$STATE] = useState$TABSTOP($TABSTOP)

useEffect

useE ->

useEffect(() => {
  $TABSTOP
}, [$TABSTOP])

useEffect async

useEA ->

useEffect(() => {
  let cancelled = false

  ;(async function $DOWORK(): Promise<$VOID> {
    // async work here
    $TABSTOP
    if (cancelled) {
      return
    }

    $TABSTOP
  })()

  return () => {
    cancelled = true
  }
}, [$TABSTOP])

useContext

useC ->

const context = useContext$TABSTOP($TABSTOP)

or inline:

return useC ->

return useContext$TABSTOP($TABSTOP)

useReducer

useRed ->

const [$STATE, $DISPATCH] = useReducer<typeof $REDUCER>($REDUCER, $NULL)

useReducer Untyped

useRedUT ->

const [$STATE, $DISPATCH] = useReducer($REDUCER, $NULL)

useCallback

useCB ->

const $CALLBACK = useCallback(($TABSTOP) => {
  $TABSTOP
}, [$TABSTOP])

useMemo

useM ->

const $MEMOIZED = useMemo(() => {
  $TABSTOP
}, [$TABSTOP])

useRef

useR ->

const $REF = useRef$TABSTOP(TABSTOP)

useImperitiveHandle

useI ->

useImperitiveHandle($REF, () => ({
  $TABSTOP,
}), [$TABSTOP])

useLayoutEffect

useL ->

useLayoutEffect(() => {
  $TABSTOP
}, [$TABSTOP])

useDebugValue

useDV ->

useDebugValue($NULL)

General Built-Ins (Typescript)

reduce to type (Typescript Only)

re ->

Normally would be something like list.re ->

reduce<$TABSTOP>(($RESULT, $VALUE) => {
  $TABEND

  return $RESULT
}, {})
// ^^ is a $TABSTOP

jsdoc comment

/** ->

/**
 * $TABEND
 */

Importing

Shortcut	Expands to
rc	const packageName = require('package-name')
rcn	const { nested } = require('package-name')
imp	import packageName from 'package-name'
impf	import File from './File'
impn	import { nested } from 'package-or/path'
impa	import * as Thing from 'package-or/path'
impp	import './file'
icn	import cn from 'classnames'
ism	import styles from './$CFN.module.scss'

Exporting

Shortcut	Expands to
exp	export { default } from './CurrentFolder'
expf	export File from './File'
expn	export { nested } from 'package-or/path
expa	export * from 'package-or/path'
expd	export { default as Thing } from './Thing'

Logging

Shortcut	Expands to
cl	console.log($TABSTOP)
clv	console.log('variable: ', variable)
ce	console.error($TABSTOP)
cev	console.error('variable: ', $TABSTOP)
cw	console.warn($TABSTOP)
cwv	console.warn('variable: ', $TABSTOP)
ct	console.table($TABSTOP)
cd	console.debug($TABSTOP)
cdv	console.debug('variable: ', $TABSTOP)

NODE_ENV

Shortcut	Expands to
dev	process.env.NODE_ENV !== "production"
prod	process.env.NODE_ENV === "production"

Tests (Javascript and Typescript)

React Test File

rtf ->

import React from "react"
import { render } from "@testing-library/react"

import $CFN from "../$CFN"

describe("$CFN", () => {
  it("should $TABSTOP", () => {
    $TABSTOP
  })
})

Note: typescript will do import { $CFN } from "./$CFN" since I prefer non-default exports in typescript

React Hooks Test File

rhtf ->

import React from "react"
import { renderHook } from "@testing-library/react-hooks"

import $TABSTOP from "../$CFN"

describe("$CFN", () => {
  it("should $TABSTOP", () => {
    $TABSTOP
  })
})

Describe a test

desc ->

describe('$CFN', () => {
  it('should $TABSTOP', () => {
    $TABSTOP
  )}
})

it should...

it ->

it("should $TABSTOP", () => {
  $TABSTOP
})

it should (async)...

ait ->

it("should $TABSTOP", async () => {
  $TABSTOP
})

Test todo

todo ->

it.todo("should $TABSTOP")

expect snapshot

es ->

expect($TABSTOP_container).toMatchSnapshot()