Snippets for react

Extension with a snippet package for React development.

Features

Javascript

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

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

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

arf - Arrow function

() => {}