RNX Snippets
Professional React & Next.js Snippets for VS Code
✨ Features
| Feature |
Description |
| ⚡ Lightning Fast |
Create components, pages, and layouts in seconds |
| 📝 Dual Language |
Full support for JavaScript & TypeScript |
| 🔥 Next.js Ready |
Optimized for Next.js 13+ App Router |
| 🪝 React Hooks |
Complete set of hooks snippets |
| 🎯 Intuitive Prefixes |
Easy-to-remember shortcuts |
📦 Installation
From Marketplace (Recommended)
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "RNX Snippets"
- Click Install
Or install via command:
ext install Foshati.rnx-snippets
🛠 Manual Installation
For Cursor, Windsurf, Antigravity, VSCodium, or offline installation:
Download the .vsix file from Releases
Install via terminal:
# VS Code
code --install-extension rnx-snippets-1.1.0.vsix --force
# Cursor
cursor --install-extension rnx-snippets-1.1.0.vsix --force
# Antigravity
antigravity --install-extension rnx-snippets-1.1.0.vsix --force
# VSCodium
codium --install-extension rnx-snippets-1.1.0.vsix --force
- Or drag the
.vsix file into the Extensions view
🚀 Snippets
🪝 React Hooks
| Prefix |
Description |
us |
useState Hook |
ue |
useEffect Hook |
uem |
useEffect on Mount (empty deps) |
uc |
useContext Hook |
ur |
useRef Hook |
um |
useMemo Hook |
ucb |
useCallback Hook |
urd |
useReducer Hook |
🧩 Components (TypeScript)
| Prefix |
Description |
tsc |
React Component with Props |
tsp |
Next.js Page Component |
tsl |
Next.js Layout Component |
ts0 |
Default Export Function |
ts1 |
Named Export Function |
tsce |
Component (export at bottom) |
tspe |
Page (export at bottom) |
tsle |
Layout (export at bottom) |
ts0e |
Default Export (at bottom) |
ts1e |
Named Export (at bottom) |
🧩 Components (JavaScript)
| Prefix |
Description |
jsc |
React Component |
jsp |
Next.js Page Component |
jsl |
Next.js Layout Component |
js0 |
Default Export Function |
js1 |
Named Export Function |
jsce |
Component (export at bottom) |
jspe |
Page (export at bottom) |
jsle |
Layout (export at bottom) |
js0e |
Default Export (at bottom) |
js1e |
Named Export (at bottom) |
🔧 Advanced Patterns
| Prefix |
Description |
tsh / jsh |
Custom Hook Template |
tsctx / jsctx |
Context Provider with Hook |
🚀 Next.js App Router
| Prefix |
Description |
nuc |
'use client' directive |
nus |
'use server' directive |
tsload / jsload |
Loading Component |
tserr / jserr |
Error Boundary Component |
ts404 / js404 |
Not Found Page |
tsapi / jsapi |
API Route Handler |
tsmeta |
Static Metadata |
tsgmeta |
Generate Metadata Function |
tssa / jssa |
Server Action |
📝 Examples
us - useState Hook
const [count, setCount] = useState<number>(0)
ue - useEffect Hook
useEffect(() => {
// effect
return () => {
// cleanup
}
}, [dependencies])
📝 Examples
tsc - TypeScript Component
type Props = {}
export const Button = ({}: Props) => {
return (
<div>Button</div>
)
}
tsp - TypeScript Page
export default function HomePage() {
return (
<div>HomePage</div>
)
}
tsl - TypeScript Layout
type Props = {
children: React.ReactNode
}
export default function RootLayout({ children }: Props) {
return (
<div>
{children}
</div>
)
}
💡 Tips
- Tab Completion: Type prefix +
Tab to insert snippet
- Navigate Placeholders: Use
Tab to jump between placeholders
- Auto-Rename: Component name updates in all locations
🧪 Development
# Install dependencies
pnpm install
# Run tests
pnpm test
# Package extension
pnpm pack
# Publish extension
pnpm publish
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
MIT License © 2024 Foshati
Made with ❤️ for React & Next.js developers
