React Code Logics VS Code Extension
Easily scaffold advanced React logic and custom hooks for your projects! This extension provides a rich set of reusable code snippets for React Contexts (state management) and custom hooks, covering common and advanced use cases.
Features
- Quickly insert ready-to-use React Context logic for features like Cart, Messaging, Notes, Todo, Auth, Theme, Notifications, Modals, File Upload, Search, Pagination, Settings, Drag & Drop, Multi-Step Forms, Filters, Sidebar, Tabs, Breadcrumbs, Language, User Preferences, Presence, Palette, Clipboard, and more.
- Instantly add custom hooks for debounce, localStorage, interval, previous value, click outside, toggle, fetch, event listener, media query, dark mode, scroll position, hover, window size, debounced callback, timeout, network status, focus, isMounted, document title, async, and more.
- All snippets are TypeScript-ready and designed for easy modification.
Usage
- Install the extension.
- In a React or TypeScript React file, type a snippet prefix (e.g.
rcl-cart-context, rcl-use-debounce) and select the snippet from IntelliSense.
- Edit the generated code to fit your project needs.
Snippet List
Contexts:
- Cart, Messaging, Notes, Todo, Auth, Theme, Notification, Modal, File Upload, Search, Pagination, Settings, Drag and Drop, Multi-Step Form, Filter, Sidebar, Tab, Breadcrumb, Queue Notification, Language, User Preferences, Presence, Theme Palette, Clipboard
Custom Hooks:
- useDebounce, useLocalStorage, useInterval, usePrevious, useOnClickOutside, useToggle, useFetch, useEventListener, useMediaQuery, useDarkMode, useScrollPosition, useHover, useWindowSize, useDebouncedCallback, useTimeout, useNetworkStatus, useFocus, useIsMounted, useDocumentTitle, useAsync
Requirements
No special requirements. Works out of the box in any React or TypeScript React project.
Extension Settings
This extension does not contribute any VS Code settings.
Known Issues
Release Notes
0.0.1
- Initial release: Includes 20+ React Context and 20+ custom hook snippets for rapid React development.
| |
