React Functional Snippets

Welcome to the React Functional Components (RFC) snippets for VS Code! This set of snippets is designed to boost your productivity when creating React functional components. Whether you're working with JavaScript, JSX, TypeScript, or TSX, these snippets will help you quickly scaffold functional components with different configurations.

Navigation Guide

When working with multiple placeholders ($1, $2, $3, $4) in the snippets, you can navigate between them using the Tab key. Here's a quick guide:

1. After typing the snippet prefix, press Tab to move to the next placeholder.
2. Keep pressing Tab to cycle through the placeholders.
3. Press Shift + Tab to move to the previous placeholder.

Snippets

Usage:

1. Type the snippet prefix.
2. Press Enter to use the snippet.
3. Follow the instructions to fill in placeholders.

Note: With Hooks, you should need to press Tab 2x to capitalize correctly.

1. console.log() with variable (cl)

console.log($1);

2. console.log() with string (cls)

console.log("$1");

3. React Functional Component (rfc)

export function $1() {
  return $2;
}

4. React Functional Component with Interfaces(rfci)

interface I$1 {
  $2;
}

export function $1() {
  return $4;
}

5. React Functional Component with types(rfct)

type $1Props = {
  $2;
};

export function $1(props: $1Props) {
  return $4;
}

6. React Use State Snippet(ust)

const [ $1, set${1:capitalize} ] = useState($2);

7. Typed React Use State Snippet(ustt)

const [ $1, set${1:capitalize} ] = useState<$2>($3);

8. React Use Effect Snippet(usef)

useEffect(() => {
  $1;
}, [$2]);

9. React Use State with Return Snippet(usefr)

useEffect(() => {
  $1;
  return () => {
    $2;
  };
}, [$3]);

Download it here

License

This extension is licensed under the MIT License.