Snippets for react

Extension with a snippet package for React development.

Features

Javascript

Snippet	Renders
imr	Import React
usf	useState
uef	useEffect
fcd	Function Component export Default
fc	Function Component export
cp	Context Provider

imr - Import React

import React from 'react'

usf - useState

const [state, setState] = useState()

uef - useEffect

useEffect(() => {

}, [])

fcd - Function Component export Default

export default function Name() {

  return (
    <>

    </>
  )
}

fc - Function Component export

export function Name() {

  return (
    <>

    </>
  )
}

cp - Context Provider

import { createContext } from 'react'

export const Context = createContext();

export default function ContextProvider({ children }){
  const value = {};

  return (
    <Context.Provider value={{value}}>
      {children}
    </Context.Provider>
  );
}

---

Typescript

Snippet	Renders
imr	Import React
usf	useState
uef	useEffect
fcd	Function Component export Default
fc	Function Component export
cp	Context Provider
itr	Interface

imr - Import React

import React from 'react'

usf - useState

const [state, setState] = useState<Type>()

uef - useEffect

useEffect(() => {

}, [])

fcd - Function Component export Default

type Props = {

}

export default function Name({}: Props): JSX.Element {

  return (
    <>

    </>
  )
}

fc - Function Component export

type Props = {

}

export function Name({}: Props): JSX.Element {

  return (
    <>

    </>
  )
}

cp - Context Provider

import { createContext } from 'react'

type Props = {
  children: React.ReactNode
}

export const Context = createContext();

export default function ContextProvider({ children }: Props){
  const value = {};

  return (
    <Context.Provider value={{value}}>
      {children}
    </Context.Provider>
  );
}

itr - Interface

interface Name {

}

---

Jest

Snippet	Renders
dsc	Describe
it	It
test	Test
afta	afterAll
aft	afterEach
befa	beforeAll
bef	beforeEach
wf	waitFor

dsc - Describe

describe('', () => {})

it - It

it('', () => {})

test - Test

test('', () => {})

afta - afterAll

afterAll(() => {})

aft - afterEach

afterEach(() => {})

befa - beforeAll

beforeAll(() => {})

bef - beforeEach

beforeEach(() => {})

wf - waitFor

await waitFor(() => {})

---

Basic

Snippet	Renders
arf	Arrow function

arf - Arrow function

() => {}