ReactJS Snippets

VS Code and Cursor snippets for React, JavaScript, TypeScript, HTML, and CSS.

Type an @ prefix and press Tab or Enter to expand.

Features

512 snippets with an @ prefix (e.g. @rafce, @html5, @flexcenter)
React 19: useActionState, useOptimistic, use(), Server Actions, RSC
React Router, Redux Toolkit, Zustand, TanStack Query, React Hook Form
Next.js App Router: pages, layouts, metadata, loading, error, server/client components
JavaScript/TypeScript: fetch, Promise.withResolvers, Object.groupBy, types
HTML5: semantic layout, forms, media, Open Graph, ARIA
CSS: flexbox, grid, container queries, :has(), nesting, @layer, oklch

Supported Languages

Extension	Snippets
`.js` / `.jsx`	React + JavaScript
`.ts` / `.tsx`	React + JavaScript + TypeScript
`.html`	HTML5
`.css` / `.scss` / `.less`	CSS

Usage

Install from the Marketplace
Open a .tsx, .jsx, .html, or .css file
Type a prefix such as @rafce, @ust, or @html5
Pick the suggestion or press Tab

Press Ctrl+Space (Mac: Cmd+Space) if suggestions do not show up.

Snippets

React (162)

Category	Examples	Prefixes
Components	Functional, arrow, class, memo, lazy, forwardRef	`@rfc`, `@rafce`, `@rcc`, `@memo`, `@lazy`
React 19 hooks	useActionState, useOptimistic, use(), useFormStatus	`@uas`, `@uop`, `@use`, `@ufs`
Core hooks	useState, useEffect, useRef, useMemo, useCallback, …	`@ust`, `@uef`, `@urf`, `@umo`, `@ucb`
Custom hooks	useFetch, useDebounce, useLocalStorage, useToggle	`@uhk`, `@usefetch`, `@usedebounce`
JSX & events	Fragment, map, ternary, onClick, onChange, portal	`@frag`, `@mapjsx`, `@onclick`, `@portal`
React Router	Routes, loaders, actions, navigate, params	`@router`, `@loader`, `@navigate`, `@rrb`
State management	Redux Toolkit, Zustand, TanStack Query	`@rsl`, `@rdx`, `@zus`, `@usequery`
Next.js	Page, layout, metadata, server/client components	`@npg`, `@nextlayout`, `@clientcomponent`
Ecosystem	Vite, Tailwind, Zod, shadcn/ui, GraphQL/Apollo	`@vite`, `@tailwindclass`, `@zodschema`

JavaScript / TypeScript (138)

Category	Examples
Variables & functions	`@const`, `@fn`, `@async`, `@asyncaf`, `@iife`
Arrays & objects	`@map`, `@filter`, `@reduce`, `@flatmap`, `@entries`
Promises & fetch	`@fetch`, `@axios`, `@promiseall`, `@jpw`
Loops & conditionals	`@for`, `@forof`, `@if`, `@switch`, `@jternary`
Classes & TypeScript	`@class`, `@jty`, `@jif`, `@jut`, `@jsf`
Utilities	`@debounce`, `@throttle`, `@deepclone`, `@sleep`

HTML (90)

Category	Examples
Boilerplate	`@html5`, `@h5`, `@doctype`, `@charset`, `@viewport`
Layout	`@header`, `@main`, `@section`, `@hnav`, `@hly`
Forms	`@hform`, `@hinput`, `@htextarea`, `@fieldset`, `@hsl`
Media	`@img`, `@picture`, `@video`, `@iframe`
SEO & meta	`@hog`, `@htc`, `@hlc`, `@hpn`

CSS (122)

Category	Examples
Layout	`@flex`, `@grid`, `@flexcenter`, `@gridcols`
Position	`@relative`, `@absolute`, `@sticky`
Spacing & size	`@margin`, `@padding`, `@gap`, `@clamp`
Typography	`@fontsize`, `@textcenter`, `@ellipsis`
Effects	`@shadow`, `@gradient`, `@keyframes`, `@backdrop`
CSS features	`@container`, `@chs`, `@clr`, `@cok`, `@cap`
Responsive	`@media`, `@mobile`, `@tablet`, `@darkmode`

Common Prefixes

@rafce     Arrow component + export          @html5      HTML5 document
@ust       useState                            @flexcenter Flexbox center
@uef       useEffect                           @gridcols   CSS grid columns
@uas       useActionState (React 19)           @fetch      fetch + JSON
@usequery  TanStack Query                      @rsl        Redux createSlice
@router    React Router setup                  @zodschema  Zod validation
@clientcomponent  'use client' + component     @vite       Vite + React config

Prefix Reference

React

Prefix	Description
`@cl`	`'use client'` directive
`@sv`	`'use server'` action
`@rst`	Component starter (useState + useEffect)
`@rfc` / `@rfa` / `@rts`	Functional / arrow / TypeScript component
`@rafce` / `@rfce`	Arrow or function component with export
`@memo` / `@lazy` / `@sus`	memo, lazy + Suspense, Suspense boundary
`@err` / `@errorboundary`	Error Boundary
`@ust` / `@uef` / `@urf` / `@umo` / `@ucb`	Core hooks
`@uas` / `@uop` / `@use` / `@ufs`	React 19 hooks
`@ctx` / `@prt` / `@frm`	Context, portal, Server Action form
`@rsl` / `@rdx` / `@zus`	Redux Toolkit, Zustand
`@tqf` / `@tqm` / `@usequery`	TanStack Query
`@rtr` / `@rrb` / `@nav` / `@ung`	React Router
`@npg` / `@nmd` / `@asc` / `@nextlayout`	Next.js

JavaScript / TypeScript

Prefix	Description
`@jim` / `@jin` / `@imp` / `@imd`	Imports
`@jaf` / `@async` / `@asyncaf`	Async functions
`@jft` / `@fetch` / `@axios`	HTTP requests
`@jmap` / `@filter` / `@reduce`	Array methods
`@jtc` / `@try` / `@trycatch`	Error handling
`@debounce` / `@throttle`	Utilities

HTML & CSS

Prefix	Description
`@h5` / `@html5`	HTML5 boilerplate
`@hly` / `@hfrm` / `@hdl`	Layout, forms, dialog
`@cfx` / `@cgr` / `@ccq`	Flex, grid, container queries
`@cmq` / `@cdk` / `@darkmode`	Media queries
`@cns` / `@clr` / `@cap`	Nesting, layers, anchor positioning

Changelog

See CHANGELOG.md.

Author

Varun Bardwaj — GitHub