The Ultimate
Snippet Library.

Optimize `useEffect` with Deep Comparison for Dependencies

Use `useDeepCompareEffect` to prevent unnecessary re-runs of `useEffect` callbacks when dependencies are complex objects or arrays, by performing a deep equality check instead of a shallow one.

Implement Keyboard Focus Trap for Modals and Dialogs

Create `useFocusTrap`, a critical React hook for accessibility that restricts keyboard focus within a specified container, preventing users from tabbing outside of modals or dialogs.

Persist React State to Local Storage

Learn how to create a custom React hook, `useLocalStorage`, to effortlessly synchronize and persist your component's state with the browser's local storage.

Respond to CSS Media Queries in React

Create a `useMediaQuery` React hook to declaratively respond to CSS media queries, enabling dynamic component rendering based on screen size or other viewport properties.

Dynamically Update Browser Document Title

Learn to build `useDocumentTitle`, a custom React hook for declaratively setting the browser tab's title, useful for dynamic page titles in single-page applications.

Simple Controlled Input State Management

Develop a `useInput` React hook for managing the state and change handlers of basic form input fields, streamlining common form interactions.

Dynamically Add and Remove DOM Elements

Learn how to programmatically create new HTML elements from scratch, append them to the DOM, and efficiently remove existing elements using pure JavaScript.

Manage Element Attributes and CSS Classes

Discover JavaScript methods to efficiently add, remove, and toggle CSS classes, along with setting and getting custom data attributes on HTML elements.

Traverse the DOM Tree with JavaScript

Learn how to navigate the Document Object Model (DOM) using JavaScript, accessing an element's parent, children, and siblings to locate specific elements.

Update Element Text and HTML Content Safely

Understand the difference between `textContent` and `innerHTML` for updating element content, and learn when to use each for security and formatting purposes.

Creating a Sticky Footer with Flexbox

Implement a sticky footer that consistently stays at the bottom of the viewport, pushing content above it to fill available space using Flexbox layout.

Responsive Navigation Bar with Flexbox

Build a flexible navigation bar that adapts to screen sizes, displaying horizontally on large screens and stacking vertically on smaller devices using Flexbox and media queries.