Premium
JAVASCRIPT Snippets.

Safely Escape HTML for XSS Prevention in JavaScript

Protect your web applications from Cross-Site Scripting (XSS) by properly escaping HTML special characters before displaying user-generated content in JavaScript.

Update Element Text or HTML Content

Discover how to efficiently update the plain text or inner HTML content of an existing DOM element using JavaScript's `textContent` and `innerHTML` properties.

Manage Element Attributes Dynamically

Learn to dynamically set, get, and remove HTML element attributes like `src`, `href`, or custom attributes using JavaScript's attribute methods for interactivity.

Access and Manipulate Custom Data Attributes

Efficiently store and retrieve custom data within HTML elements using data attributes (`data-*`) and JavaScript's `dataset` API for dynamic application logic.

Creating a Custom `usePrevious` Hook

Learn how to implement a custom React `usePrevious` hook to easily access the previous value of any prop or state in your components.

Building a Simple `useToggle` Hook

Create a custom React `useToggle` hook for managing boolean state with a simple toggle function, enhancing component reusability.

Persisting State with a `useLocalStorage` Hook

Implement a custom React `useLocalStorage` hook to automatically synchronize component state with the browser's local storage.

Tracking Window Dimensions with `useWindowSize`

Build a custom React `useWindowSize` hook to efficiently track and react to changes in the browser window's dimensions for responsive UIs.

Implementing a `useIntersectionObserver` Hook

Create a custom React `useIntersectionObserver` hook for efficient lazy loading, infinite scrolling, or animations by detecting element visibility.

Creating a Reusable Composable for Asynchronous Data Fetching

Learn to build a custom Vue 3 composable to encapsulate data fetching logic, providing reactive state for loading, error, and data, promoting code reuse.

Managing Global State with Vue 3 Provide/Inject

Discover how to use Vue 3's `provide` and `inject` to manage global state across deeply nested components without prop drilling, enhancing component communication.

Dynamic Component Rendering with Keep-Alive in Vue 3

Learn to dynamically render different components based on data using Vue 3's `<component :is='...'>` and optimize performance with `<keep-alive>` to preserve component state.