🥷 React Ninja Snippets
Extension to increase productivity with fast and efficient snippets, helping you write code faster and more accurately.
✨ Features
🚀 React Component Snippets
Generate React components automatically using the file name, with support for multiple component styles:
Trigger |
Description |
rfca |
Creates a component with arrow function and separate export default |
rfc |
Creates a component with export function declaration |
rfcd |
Creates a component with export default function declaration |
rfce |
Creates a component with export const arrow function |
⚡ React Hooks Snippets
Quick access to all essential React Hooks with automatic imports:
Prefix |
Hook |
Import Handling |
ust |
useState |
Auto-imports |
uef |
useEffect |
Auto-imports |
ucb |
useCallback |
Auto-imports |
urf |
useRef |
Auto-imports |
urd |
useReducer |
Auto-imports |
uct |
useContext |
Auto-imports |
umo |
useMemo |
Auto-imports |
uid |
useId |
Auto-imports |
uts |
useTransition |
Auto-imports |
Example Usage
Component Generation
Simply type the trigger and press Tab
or Enter
:
- Create a new file:
MyComponent.tsx
- Type
rfca
and press Tab
- Result:
const MyComponent = () => {
return (
)
}
export default MyComponent
Hook Usage
The extension automatically adds the required import statement:
- Type
ust
and press Tab
- Result:
import { useState } from 'react';
const [state, setState] = useState()
Features
- 🎯 Smart Component Creation: Uses file name for component naming
- 📦 Automatic Imports: Manages React imports automatically
- 🎨 Multiple Styles: Support for various component patterns
- ⚡ Quick Access: Short, memorable triggers
- 🔄 Modern Hooks: Support for all modern React hooks
- 💡 IntelliSense: Full IntelliSense support with preview
Component Snippets in Detail
Arrow Function Component (rfca)
const ComponentName = () => {
return (
)
}
export default ComponentName
Export Function (rfc)
export function ComponentName() {
return (
)
}
Export Default Function (rfcd)
export default function ComponentName() {
return (
)
}
Export Arrow Component (rfce)
export const ComponentName = () => {
return (
)
}
Developed with ❤️ and lots of ☕ by @jairochabr
⭐ Rate this extension
🐛 Report a bug
💡 Suggest Improvements