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
Tabto 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
Buttonvariants snippetInput+Labelform field snippetCardlayout snippetDialogmodal snippetDropdown MenusnippetTablesnippet with data mappingFormsnippet integrated with RHF + Zod + shadcn