Modern React Typescript Snippets

This extension provides you with a variety of shortcuts to make writing modern React components faster and easier using Typescript.

Features

• Modern React with Typescript. No class 💪. No PropTypes 🕺.
• Component snippets auto populate the component name based on filename which support kebab-case or PascalCase
• Component snippets support TS interface and type
• Component snippets support functional declaration and arrow function
• useState hook snippet auto populates the setter name

Snippets

Snippets Expansions

Component using functional declaration

rcf - basic

export function |() {
  |
  return |
}

rcf-d - with default export

export default function |() {
  |
  return |
}

rcf-i - with interface

export| interface |Props {
  |:|
}

export function |({ | }: |Props) {
  |
  return |
}

rcf-di - with default export and interface

export| interface |Props {
  |:|
}

export default function |({ | }: |Props) {
  |
  return |
}

Component using arrow function

rca - basic

export const | = () => {
  |
  return |
}

rca-d - with default export

const | = () => {
  |
  return |
}

export default |;

rca-i - with interface

export| interface |Props {
  |:|
}

export const | = ({ | }: |Props) => {
  |
  return |
}

rca-di - with default export and interface

export| interface |Props {
  |:|
}

const | = ({ | }: |Props) => {
  |
  return |
}

export default |;

Hooks

rucb - useCallback Hook

const | = useCallback((|) => {
  |
}, [|])

ruct - useContext Hook

const | = useContext|(|)

rudb - useDebugValue Hook

useDebugValue|(|)

rudf - useDeferredValue Hook

const | = useDeferredValue|(|)

rue - useEffect Hook

useEffect(() => {
  |
}, [|])

rue-r - useEffect Hook with return

useEffect(() => {
  |
  return () => {
    |
  }
}, [|])

rui - useImperativeHandle Hook

useImperativeHandle(|, () => ({
  return {
    |() {
      |
    }
  }
}), [|])

rul - useLayoutEffect Hook

useLayoutEffect(() => {
  |
}, [|])

rum - useMemo Hook

const | = useMemo(() => |, [|])

rurd - useReducer Hook

const [|, |] = useReducer(|, |, |)

rurf - useRef Hook

const | = useRef|(|)

rust - useState Hook

const [|, set|] = useState|(|)

rusy - useSyncExternalStore Hook

const | = useSyncExternalStore(|, |, |)

rut - useTransition Hook

const [|, |] = useTransition(|, |)