Premium
JAVASCRIPT Snippets.

Track Window Scroll Position with useScrollPosition Hook

A versatile React hook to efficiently track the scroll position of the window, enabling dynamic UI elements based on scrolling.

Efficient Input Handling with useDebounce Hook

Optimize React component performance by debouncing state updates for user inputs like search fields, preventing excessive re-renders and API calls.

Accessing Previous Prop or State Values with usePrevious Hook

Implement a custom React hook to easily access the previous value of any prop or state variable, useful for comparing changes in `useEffect` or other logic.

Lazy Loading and Visibility Detection with useIntersectionObserver Hook

Efficiently detect when an element enters or exits the viewport using the `IntersectionObserver` API wrapped in a custom React hook for lazy loading images or infinite scrolling.

Managing Async Operations and Data Fetching with useAsync Hook

Create a robust custom React hook to handle asynchronous operations, providing loading, error, and data states for cleaner and more reusable data fetching logic.

Programmatic Modal/Toast Management

Learn how to programmatically create and manage Vue 3 components like modals or toasts without mounting them directly in the template, enabling global overlay control.

Custom `v-model` with Multiple Properties

Extend Vue 3's `v-model` to bind multiple properties simultaneously on a custom input component, enabling more flexible and reusable custom form elements.

Using Teleport for Global Overlays

Effectively use Vue 3's `<Teleport>` component to render content, such as modals, tooltips, or notifications, into a different part of the DOM tree, avoiding z-index and overflow issues.

Global State Sharing with Provide/Inject

Implement flexible dependency injection in Vue 3 using `provide` and `inject` from the Composition API for sharing data or functions across deep component hierarchies, avoiding prop drilling.

Reactive Side Effects with watchEffect

Utilize Vue 3's `watchEffect` to automatically track reactive dependencies and execute side effects, simplifying reactive logic and ensuring automatic re-execution when dependencies change.

Validating URLs with Regular Expressions

Use this JavaScript regex pattern to accurately validate various URL formats, including HTTP/HTTPS protocols, domains, and optional paths, for robust input checks.

Strong Password Validation with Multiple Regex Rules

Implement robust password validation using a set of regular expressions to enforce length, and character types like uppercase, lowercase, number, and symbol.