Premium
JAVASCRIPT Snippets.

Validate Hexadecimal Color Codes (Short and Long)

Validate both 3-digit (#RGB) and 6-digit (#RRGGBB) hexadecimal color codes, with or without the hash, using a simple JavaScript regex pattern.

Extract Query Parameters from a URL String

Discover how to extract specific query parameters or all parameters from a URL string using JavaScript regex, useful for client-side routing or data retrieval.

Validate Basic Password Strength Requirements

Implement a JavaScript function with regex to check basic password strength, ensuring it includes uppercase, lowercase, numbers, and minimum length.

Remove HTML Tags from a String for Sanitization

Learn to effectively strip HTML tags from user-provided strings using a simple JavaScript regular expression, preventing XSS vulnerabilities and cleaning content.

useDebounce Hook for Delaying State Updates

Implement a custom `useDebounce` React hook to delay the update of a value, preventing excessive re-renders or API calls during rapid input changes.

useClickOutside Hook for Detecting Clicks Outside an Element

Create a `useClickOutside` React hook to detect clicks occurring outside a specified DOM element, perfect for closing dropdowns, modals, or tooltips.

useFetch Hook for Asynchronous Data Fetching

Develop a reusable `useFetch` React hook to manage data fetching, including loading, error, and data states, simplifying API integrations in components.

useIsMounted Hook to Track Component Mount Status

Create a simple `useIsMounted` React hook to safely determine if a component is currently mounted, preventing state updates on unmounted components.

useArray Hook for Managing Array State

Implement a `useArray` React hook providing common utility functions (add, remove, update, clear) for managing array state in a declarative way.

Vue 3 Composable for Persisting State to Local Storage

Learn to create a custom Vue 3 composable to effortlessly persist reactive state to local storage, ensuring data persistence across page reloads and enhancing user experience.

Vue 3 Pinia Store for Global User Authentication State

Implement a Pinia store in Vue 3 to manage global user authentication state, including login status, user details, and actions, providing a centralized and efficient state management solution.

Vue 3 Teleport for Rendering Modals Outside Component Tree

Utilize Vue 3's Teleport feature to render a modal or dialog component directly into the body, preventing z-index issues and ensuring proper overlay behavior regardless of component nesting.