🏂🏻 - React and Javascript Snippets

Uses single quotes and no semicolons by default

Boost your productivity with a clean and modern set of snippets for:

• 
• 
• 

Snippets Index

• Components
• Hooks
• Functions
• Object
• Types
• Utilities
• ...

---

Utilities

l - Let Statement

let name

l= - Let Assignment

let name = value

dl= - Destructuring Let Assignment

let { name } = value

co - Const Statement

const name

co= - Const Assignment

const name = value

dco= - Destructuring Const Assignment

const { name } = value

Control

if - If Statement

if (condition) {
  // your code
}

el - Else Statement

else {
 // your code
}

ifel - If/Else Statement

if (condition) {
  // your code
} else {
  // your code
}

elif - Else If Statement

else if (condition) {
 //your code
}

ter - Ternary Operator

condition ? expression : expression

tc - Try/Catch

try {
  //your code
} catch (err) {
  //your code
}

tf - Try/Finally

try {
  //your code
} finally {
  //your code
}

tcf - Try/Catch/Finally

try {
  //your code
} catch (err) {
  //your code
} finally {
  //your code
}

sw - Switch Case

switch (expr) {
  case value:
    //your code
    break
  default:
  //your code
}

Functions

arrow - Arrow Function

const name = (args) => {
  //your code
}

f - Anonymous Function

function (arguments) {
  //your code
}

fn - Named Function

function name(arguments) {
  //your code
}

afb - Arrow Function with Body

;(arguments) => {
  //your code
}

Objects

deso - Destructure Object

const { value } = object

desa - Destructure Array

const [value] = array

Iterables

fe - forEach Loop

array.forEach((item) => {
  //your code
})

map - Map

array.map((item) => {
  //your code
})

reduce - Reduce

array.reduce((previous, current) => {
  //your code
}, initial)

filter - Filter

array.filter((item) => {
  //your code
})

find - Find

array.find((item) => {
  //your code
})

Returning values

r - Return

return value

Modules

exd - Export Default

export default value

imp - Import Module

import { moduleName } from "module"

imd - Import Module As

import moduleName from "module"

imr - Import React

import React from "react"

impcss - Import CSS

import "./styles.css"

impcssmd - Import CSS Module

import styles from "./styles.module.css"

Console

cl - Console.log

console.log(value)

ce - Console.error

console.error(value)

cw - Console.warn

console.warn(value)

ct - Console.table

console.table(value)

Timers

st - setTimeout

setTimeout(() => {
  //your code
}, delay)

si - setInterval

setInterval(() => {
  //your code
}, delay)

sim - setImmediate

setImmediate(() => {
  //your code
})

Types

imt - Import PropTypes

import PropTypes from "prop-types"

tst- Type declaration

type Name = {
  // your code
}

tsi- Interface declaration

interface Name {
  // your code
}

tsen- Enum declaration

enum Name {
  // your code
}

Components

rf - React Functional Component Export

export function Component () {
  return <>{/* your code */}</>
}

rfd - React Functional Component Default Export

function Component () {
  return <>{/* your code */}</>
}

export default Component

ra - React Arrow Functional Component Export

export const Component = () => {
  return <>{/* your code */}</>
}

rad - React Arrow Functional Component Default Export

const Component = () => {
  return <>{/* your code */}</>
}

export default Component

tsra - Typescript React Arrow Functional Component Export

interface Props {}

const Component = ({}: Props) => {
  return <>{/* your code */}</>
}

export default Component

tsrad - Typescript React Arrow Functional Component Default Export

interface Props {}

const Component = ({}: Props) => {
  return <>{/* your code */}</>
}

export default Component

lazy - Lazy Import Snippet

const Component = lazy(() => import("./Component"))

Hooks

us or useState Snippet

const [state, setState] = useState(initialState)

usl or useStateLazy Snippet

const [state, setState] = useState(() => fn)

ured or useReducer Snippet

const [state, dispatch] = useReducer(reducer, initialState)

ue or useEffect Snippet

useEffect(() => {
  // your code
}, [])

ucx or useContext Snippet

const context = useContext(Context)

uc or useCallback Snippet

const memoizedCallback = useCallback(callbackFn, [])

um or useMemo Snippet

const memoizedValue = useMemo(() => value, [])

uref or useRef Snippet

const ref = useRef(initialValue)

uid or useId Snippet

const id = useId()

🙌 Credits

Inspired by:

• 💛 @nathanchapman
• 💙 @ymulenll

---

📌 Install

Search “React, TypeScript & Next.js Snippets” in the VS Code marketplace or click here.

---