https://github.com/michaelfarquhar/react-snippets

Collection of react snippets that I use, supporting both JavaScript & TypeScript.
https://github.com/michaelfarquhar/react-snippets

react-snippets vscode-snippets

Last synced: 4 months ago
JSON representation

Collection of react snippets that I use, supporting both JavaScript & TypeScript.

• Host: GitHub
• URL: https://github.com/michaelfarquhar/react-snippets
• Owner: MichaelFarquhar
• License: mit
• Created: 2024-11-03T18:18:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-15T03:56:02.000Z (over 1 year ago)
• Last Synced: 2025-03-12T13:44:58.938Z (over 1 year ago)
• Topics: react-snippets, vscode-snippets
• Homepage:
• Size: 16.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Snippets

![VS Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

Collection of react snippets I use, supporting both JavaScript and TypeScript. I use these over the many pre-existing extensions because those generally clog up VS Code with tons of snippets i would never use.

## How To Add Snippets

- Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)

- Type "Configure User Snippets" and select it

- Choose "New Global Snippets file..."

- Name your snippets file whatever you'd like

- Copy and paste the snippets into the newly created file

## ✂️ Snippets

| Alias | Purpose                                      |

|-------|----------------------------------------------|

| imr   | Import React statement                       |

| rc    | React Function Component with `export const` |

| rct   | Same as above but with a props interface     |

| ush   | useState Hook                                |

| efh   | useEffect Hook                               |

| ech   | useCallback Hook                             |

| emh   | useMemo Hook                                 |

| urh   | useRef Hook                                  |

| tern  | Ternary Operator Condition                   |

| ushLoad  | Generic loading state hook                |

| uihh  | useImperativeHandle hook                     |

| utt   | useTranslation hook with t function          |

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details.