Premium
JAVASCRIPT Snippets.

React useWhyDidYouUpdate Hook for Component Re-render Debugging

Debug unnecessary React component re-renders with `useWhyDidYouUpdate`, a custom hook that logs prop and state changes causing updates, improving performance.

Reusable Modal Component with Vue 3 Teleport

Learn how to build a flexible and accessible modal dialog component in Vue 3 using the Teleport feature to render it outside the component's DOM hierarchy for better control.

Reusable Data Fetching Composable in Vue 3

Create a custom composable function in Vue 3 to encapsulate data fetching logic, making it reusable, reactive, and easy to integrate into any component that needs to fetch data.

Build a Custom Input Component with v-model in Vue 3

Learn to create a custom reusable input component in Vue 3 that fully supports `v-model` for two-way data binding, enhancing form development and component reusability.

Dynamic Component Rendering with Vue 3's <component :is>

Implement dynamic component rendering in Vue 3 using the special `<component :is>` attribute to display different components based on conditions or data, ideal for tabbed interfaces.

Dynamically Update CSS Variables on an Element

Learn how to use JavaScript to dynamically set and update CSS custom properties (variables) on specific DOM elements, enabling powerful runtime styling and theming without class toggles.

Collect Form Data and Show Submission Feedback

Discover how to programmatically gather all input values from a form, prevent default submission, and update a specific DOM element to provide real-time user feedback on submission status.

Create and Manage Dynamic List Items with Removal

Generate multiple list items dynamically from an array of data, append them to the DOM, and empower users to remove individual items using event listeners attached to each element.

Detect Element Visibility Using IntersectionObserver

Implement the IntersectionObserver API to efficiently check when a specific DOM element enters or exits the user's viewport, ideal for lazy loading, analytics, or animations.

Validate Flexible International Phone Numbers

Validate various international phone number formats including optional country codes, spaces, and dashes using a robust JavaScript regex pattern.

Extract All Image Source URLs from HTML

Quickly extract all `src` attribute values from `<img>` tags within an HTML string using a regular expression in JavaScript.

Extract YouTube Video ID from URLs

Easily extract the unique video ID from standard, shortened, and embed YouTube URLs using a single, versatile regular expression.