Version Installs License

Modern snippets for React and Next.js 15+ development. Built for the latest patterns including async params, server components, and React 19 features.

Snippets

React

Prefix	Name	Description
`prc`	Page Component	Simple page component
`prcfc`	Functional Component (FC)	Arrow function with `React.FC<Props>`
`prca`	Async Server Component	Server component with async data fetching
`prch`	Custom Hook	Hook with `useState` and `useEffect`
`crc`	Client Component	Component with `"use client"` directive
`rfc`	Arrow Function Component	Arrow function with named export
`rfce`	Arrow Function Component (DE)	Arrow function with default export
`rmc`	Memo Component	Component wrapped with `memo()`
`ebc`	Error Boundary	React 19 `ErrorBoundary` wrapper component

Next.js

Prefix	Name	Description
`lmrc`	Layout with Metadata	Layout component with `Metadata` export
`lrc`	Layout without Metadata	Layout component without metadata
`mr`	Static Metadata	Static `Metadata` export
`gmrf`	Generate Metadata	`generateMetadata` function for dynamic SEO
`gsp`	Generate Static Params	`generateStaticParams` function
`ldc`	Loading Component	Loading UI component
`err`	Error Component	Error segment with reset functionality
`prcsp`	Page with searchParams	Async page with params and searchParams (Next.js 15+)
`prcm`	Page Component with Metadata	Page component with `Metadata` export
`rfcem`	Arrow Function + Metadata (DE)	Arrow function with default export and `Metadata`

React Native

Prefix	Name	Description
`rnf`	Function Component	React Native function component
`rnfs`	Function Component + Styles	React Native function with `StyleSheet`
`rnfe`	Arrow Function Component	React Native arrow function with default export
`rnfes`	Arrow Function + Styles	React Native arrow function with `StyleSheet`

Usage

Type a snippet prefix (e.g. prc) in a .tsx or .jsx file and press Tab to expand.

Tab Stops

Snippets use tab stops to let you quickly fill in key values:

$1 — Component name. Pre-filled with the PascalCase version of your filename (e.g. product-list.tsx becomes ProductList). Mirrored everywhere the name appears (declaration, JSX, export).
$2, $3 — Secondary fields like Props type contents, destructured params, metadata values.
$0 — Final cursor position after all tab stops are filled.

Press Tab to move to the next stop. Edit $1 once and all mirrored instances update together.

Next.js 15+ Notes

This extension follows Next.js 15+ conventions:

params and searchParams are Promises. In Next.js 15+, dynamic route parameters are async. The prcsp and gmrf snippets use Promise<{ slug: string }> and await params to match this pattern.
Server components are the default. The prca snippet creates an async function component for server-side data fetching without any directive.
Client components require "use client". The crc and err snippets include the directive at the top.

Supported Languages

TypeScript React (.tsx)
JavaScript React (.jsx)

Contributing

Contributions are welcome! To add or modify snippets:

Fork this repository
Edit snippets/snippets.code-snippets
Test your changes by pressing F5 in VSCode to launch the Extension Development Host
Submit a pull request