Premium
JAVASCRIPT Snippets.

Extracting Hex Color Codes

Discover how to efficiently extract all valid hex color codes (3-digit or 6-digit) from any string using JavaScript regular expressions for styling or parsing.

Sanitizing Script Tags from User Input

Prevent basic Cross-Site Scripting (XSS) by removing script tags and their content from user input using a JavaScript regular expression for initial sanitization.

Vue 3 Programmatic Navigation with Vue Router 4

Implement programmatic navigation using `router.push`, `router.replace`, and `router.go` in Vue 3 applications with Vue Router 4 for dynamic route changes.

Vue 3 Custom Directive for Auto-Focus

Create a reusable custom Vue 3 directive to automatically focus an input element when a component is mounted or when the element becomes visible, improving UX.

Vue 3 Deep and Immediate Watchers

Master deep and immediate watchers in Vue 3's Composition API to effectively react to changes within nested reactive objects or trigger initial effects on data.

React useMediaQuery Hook for Responsive Designs

Dynamically adapt your React components based on CSS media queries, enabling responsive layouts and conditional rendering with ease.

React useWindowSize Hook to Track Browser Dimensions

Get real-time updates on the browser window's width and height in your React components, ideal for responsive UI adjustments.

React useIsomorphicLayoutEffect for SSR-Friendly Layout Effects

Use this custom hook to safely apply `useLayoutEffect` logic in both client-side and server-side rendering environments without warnings.

React useOnClickOutside Hook for Detecting Clicks

Implement a versatile React useOnClickOutside hook to detect clicks outside a specified DOM element, essential for closing modals, dropdowns, or popovers.

React useScrollPosition Hook for Scroll Tracking

Master the React useScrollPosition hook to monitor scroll coordinates, empowering effects like sticky headers, progress bars, or scroll-to-top buttons.

Efficient Bulk DOM Insertion with DocumentFragment

Optimize performance when adding many new elements to the DOM by using a DocumentFragment. This reduces reflows and repaints, improving UI responsiveness.

Traversing Ancestors and Self with `closest()`

Discover how to efficiently traverse the DOM upwards from a given element to find the nearest ancestor (or itself) that matches a specified CSS selector using `element.closest()`.