mlaursen/vim-react-snippets mlaursen/vim-react-snippets

  • Stars
    star
    219
  • Rank 181,133 (Top 4 %)
  • Language Vim Snippet
  • License
    Apache License 2.0
  • Created over 9 years ago
  • Updated about 1 year ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
mlaursen/vim-react-snippets
github

mlaursen

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Useful snippets for developing in React (Javascript and Typescript)

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.

Typescript Example

some-typescript-example.mov

Previewing Snippets with coc-snippets

coc-snippets-preview.mov

Using Log Helpers

log-helpers.mov

Writing Tests

test-utils.mov

Table of Contents

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).

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 type { ReactElement } from "react"

export interface $CFN_Props {}

export function $CFN(props: $CFN_Props): ReactElement {
  return <></>
}

Function Component Default Export

fcde ->

import type { ReactElement } from "react"

export interface $CFN_Props {}

export default function $CFN(props: $CFN_Props): ReactElement {
  return <></>
}

Simple Function Component Export

sfce ->

import type { ReactElement } from "react"

export function $CFN(): ReactElement {
  return <></>
}

Simple Function Component Default Export

sfcde ->

import type { ReactElement } from "react"

export default function $CFN(): ReactElement {
  return <></>
}

Forwarded Function Component Export

ffce ->

import { 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 { forwardRef } from "react"

export interface $CFNProps {
  $TABSTOP
}

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

Hooks and Effects (Typescript)

useState

useS ->

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

useEffect

useE ->

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

useEffect async

useEA ->

useEffect(() => {
  let cancelled = false

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

    $TABSTOP
  })()

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

useContext

useC ->

const context = useContext($TABSTOP)

or inline:

return useC ->

return useContext($TABSTOP)

useReducer

useRed ->

const [$STATE, $DISPATCH] = useReducer(function reducer(
  state: $TABSTOP,
  action: $TABSTOP
): $TABSTOP {
  return state
},
$NULL)

useCallback

useCB ->

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

useMemo

useM ->

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

useMemo return (manual return required)

useMR ->

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

useRef

useR ->

const $REF = useRef$TABSTOP(TABSTOP)

useImperativeHandle

useI ->

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

useLayoutEffect

useL ->

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

useDebugValue

useDV ->

useDebugValue($NULL)

useTransition

useT ->

const [$isPending, $startTransition] = useTransition()

Class Components (Typescript)

React Class Export

rce ->

import { Component } from "react"

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

React Class Export with Prop interface

rcep ->

import { 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 { 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
}

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
})

General Built-Ins (Typescript)

noop

noop ->

const noop = (): void => {
  // do nothing
}

interface (Typescript Only)

intf ->

export interface $CFN_$TABSTOP {}

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
 */

Function Components (Javascript)

Function Component Export

fce ->

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

export default $CFN

Simple Function Component Export

sfce ->

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

export default $CFN

Forwarded Function Component Export

ffce ->

import { 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,
}

Hooks and Effects (Javascript)

useState

useS ->

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

useEffect

useE ->

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

useEffect async

useEA ->

useEffect(() => {
  let cancelled = false

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

    $TABSTOP
  })()

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

useContext

useC ->

const context = useContext($TABSTOP)

or inline:

return useC ->

return useContext($TABSTOP)

useReducer

useRed ->

const [$STATE, $DISPATCH] = useReducer(function reducer(state, action) {
  return state
}, $NULL)

useCallback

useCB ->

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

useMemo

useM ->

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

useMemo return (manual return required)

useMR ->

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

useRef

useR ->

const $REF = useRef($TABSTOP)

useImperativeHandle

useI ->

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

useLayoutEffect

useL ->

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

useDebugValue

useDV ->

useDebugValue($NULL)

useTransition

useT ->

const [$isPending, $startTransition] = useTransition()

Class Components (Javascript)

React Class Export

rce ->

import { 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 = {}
}

React Class Function (arrow bound class function)

rcf ->

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

Static PropTypes

spt ->

static propTypes = {
  $TABSTOP
}

Static Default Props

sdp ->

static 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
}

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
 */

noop

noop ->

const noop = () > {}

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

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'
icnb import { cnb } from 'cnbuilder'
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('$TABSTOP: ', $TABSTOP)
ce console.error($TABSTOP)
cev console.error('$TABSTOP: ', $TABSTOP)
cw console.warn($TABSTOP)
cwv console.warn('$TABSTOP: ', $TABSTOP)
ct console.table($TABSTOP)
cd console.debug($TABSTOP)
cdv console.debug('$TABSTOP: ', $TABSTOP)

Note: The logging commands that end in a v will have the cursor at the second $TABSTOP instead of the first so that autocompletion will work.

NODE_ENV

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

Tests

React Test File

rtf ->

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

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()

SCSS Snippets

New Sass Module System

Use file

use =>

@use "$TABSTOP";

Use file as *

use* ->

@use "$TABSTOP" as *;

Forward file with

forw ->

@forward "$TABSTOP" with ($TABSTOP);

Old Sass Module System

Import file

imp ->

@import "$1";

Utility

prefers-color-scheme Media Query

pcs ->

@media (prefers-color-scheme: $TABSTOP_dark) {
	$TABSTOP
}

More Repositories

1

react-md

React material design - An accessible React component library built from the Material Design guidelines in Sass
TypeScript
2,352
star
2

react-dd-menu

React Dropdown Menu
JavaScript
139
star
3

react-md-redux

This repo is deprecated. Please checkout the examples folder in the react-md repo instead. https://github.com/mlaursen/react-md/tree/master/examples
JavaScript
32
star
4

dotfiles

A repo for my bashrc and .vimrc settings
Vim Script
21
star
5

react-buttons

JavaScript
8
star
6

react-marked-renderer

A low-level component wrapper for https://github.com/markedjs/marked that renders as React components instead of strings.
TypeScript
7
star
7

gulpfile-example

Gives an example Gulpfile for a frontend project using ReactJS, BrowserSync, and others.
JavaScript
3
star
8

resume

My Resume
TeX
3
star
9

eslint-config

A reusable eslint config that I use for most of my projects.
JavaScript
2
star
10

mlaursen.com

My (empty) portfolio website now that react-md is moving to its own domain
TypeScript
2
star
11

react-md-docs

Documentation website for react-md
JavaScript
2
star
12

coc-scssmodules

css and scss modules autocompletion and go-to-definition coc.nvim plugin and hopefully supporting sass parent selectors
TypeScript
1
star