Skip to content

React and Next.js Snippets (RHF, Zod, shadcn) by SKILLHUB

Production-ready snippets for:

React
Next.js
React Hook Form (RHF)
Zod
Redux Toolkit and RTK Query

Usage

Open a file with supported language mode (javascript, javascriptreact, typescript, typescriptreact).
Type a snippet prefix.
Trigger snippet suggestion and press Enter (or your editor's snippet accept key).
Use Tab to move through placeholders.

JavaScript React Shortcuts (`snippets/javascriptreact.json`)

Purpose	Shortcut
React - Smart Functional Component	`rfc`
React - useState	`rstate`
React - useEffect	`reffect`
React - useRef	`rref`
React - useCallback	`rcallback`
React - useMemo	`rmemo`
React - useReducer	`rreducer`
React - useContext	`rcontext`
Router - Routing Template	`srrouting`
Router - Navbar (Bootstrap + Link)	`rnavbar`
Form - Login (RHF + Zod + Bootstrap)	`rlogin`
UI - Responsive Bootstrap Table	`rtable`
Validation - Zod Schema	`zodv`
Form - React Hook Form Setup	`rform`
Redux - Old Store	`srt`
Redux - Reducer	`srred`
Redux - Action With Redux Thunk	`sract`
Toolkit - Action (`createAsyncThunk`)	`srta`

JavaScript Shortcuts (`snippets/javascript.json`)

Purpose	Shortcut
Toolkit - Store (RTK Query middleware)	`srts`
Toolkit - RTK Query API	`srtapi`
Toolkit - Slice (RTK Matcher)	`srtslice`
Redux - Old Store	`srt`
Redux - Reducer	`srred`
Redux - Action With Redux Thunk	`sract`
Toolkit - Action (`createAsyncThunk`)	`srta`

TypeScript React Shortcuts (`snippets/typescriptreact.json`)

Purpose	Shortcut
React - Smart Functional Component (TS)	`rfc`
React - useState (TS)	`rstate`
React - useEffect (TS)	`reffect`
React - useRef (TS)	`rref`
React - useCallback (TS)	`rcallback`
React - useMemo (TS)	`rmemo`
React - useReducer (TS)	`rreducer`
React - useContext (TS)	`rcontext`
Validation - Zod Schema (TS)	`zodv`
Form - React Hook Form Setup (TS)	`rform`

TypeScript Shortcuts (`snippets/typescript.json`)

Purpose	Shortcut
Toolkit - RTK Query Auth API (TS)	`srtapi`
Toolkit - Redux Auth Slice (TS + Matcher)	`srtslice`
Toolkit - Redux Store (TS + RTK Query)	`srts`

Upcoming

Next.js Snippets

App Router page template snippets
App Router layout template snippets
Route Handler (app/api) snippets
Server Action form handler snippets
Metadata and SEO helper snippets
Dynamic route and params snippets

shadcn Component Snippets

Button variants snippet
Input + Label form field snippet
Card layout snippet
Dialog modal snippet
Dropdown Menu snippet
Table snippet with data mapping
Form snippet integrated with RHF + Zod + shadcn