Premium
JAVASCRIPT Snippets.

React to CSS Media Queries

A custom React hook that allows components to react dynamically to CSS media queries, enabling responsive UI changes directly within your React logic.

Generic Event Listener Hook

A versatile React hook for safely attaching and detaching event listeners to DOM elements or the window, ensuring proper cleanup and preventing memory leaks.

Detect Browser Online/Offline Status

A React hook to efficiently track and provide the current browser's online or offline connectivity status, enabling network-aware user interfaces.

Sanitize HTML Output to Prevent XSS

Learn to prevent Cross-Site Scripting (XSS) attacks by properly escaping HTML special characters before displaying user-generated content in the browser.

Managing Async Data with Loading and Error States in Vue 3 Composables

Learn to create a reusable Vue 3 Composition API composable for fetching asynchronous data, automatically handling loading, error, and success states across components.

Implementing Dynamic Components with Vue 3

Discover how to dynamically render different components based on a reactive state using Vue 3's `<component :is="...">` element, perfect for tabbed views or flexible UI.

Custom `v-model` for Complex Vue 3 Components

Master creating custom inputs in Vue 3 by implementing `v-model` for two-way data binding, enabling your components to behave just like native form elements.

Creating Modals and Notifications with Vue 3 Teleport

Learn to use Vue 3's `Teleport` feature to render components like modals, tooltips, or notifications outside the normal DOM hierarchy, ensuring they always appear on top.

Implementing a Global Event Bus with Vue 3 and `mitt`

Establish a robust global event bus in Vue 3 using the `mitt` library for cross-component communication, enabling loose coupling without prop drilling or direct parent/child relations.

useDebounce Hook for Input Value Throttling

Learn to create a custom React `useDebounce` hook to delay state updates, perfect for search inputs or any value that needs a pause before triggering actions, optimizing performance.

useLocalStorage Hook for Persisting State

Discover how to create a custom React `useLocalStorage` hook to easily persist and retrieve component state in the browser's local storage, ensuring data persistence across sessions.

usePrevious Hook for Tracking Previous State/Prop Values

Learn to build a simple `usePrevious` hook in React to easily access the prior value of any state or prop, essential for comparing current and past data in `useEffect` and other hooks.