Snippets & Ideas

A collection of code snippets, inventions, and quick blog-style notes. Useful for reference, learning, or inspiration.

A simple button to copy text to the clipboard using the Clipboard API.

function CopyButton({ text }) {
  return (
    <button onClick={() => navigator.clipboard.writeText(text)}>
      Copy
    </button>
  );
}

A custom React hook to attach event listeners to any element or the window, with automatic cleanup and stable callback reference. Works for any event type.

import { useEffect, useRef } from "react";

function useEventListener(event, handler, element = window) {
  const savedHandler = useRef();
  useEffect(() => { savedHandler.current = handler; }, [handler]);
  useEffect(() => {
    const target = element && 'current' in element ? element.current : element;
    if (!target?.addEventListener) return;
    const eventListener = (e) => savedHandler.current(e);
    target.addEventListener(event, eventListener);
    return () => target.removeEventListener(event, eventListener);
  }, [event, element]);
}
// Usage:
// useEventListener('resize', () => console.log(window.innerWidth));
// useEventListener('click', handler, ref);

Recursively freezes an object and all nested objects/arrays, making it fully immutable. Useful for advanced state management or security.

function deepFreeze(obj) {
  Object.getOwnPropertyNames(obj).forEach((prop) => {
    if (
      obj[prop] !== null &&
      (typeof obj[prop] === "object" || typeof obj[prop] === "function") &&
      !Object.isFrozen(obj[prop])
    ) {
      deepFreeze(obj[prop]);
    }
  });
  return Object.freeze(obj);
}
// Usage:
// const frozen = deepFreeze({a: {b: [1,2,3]}, c: () => {}});

Quick way to center any element both vertically and horizontally.

center-me {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Debounce limits how often a function can fire. Useful for search inputs, resize events, etc.

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

React: Copy to Clipboard Button

React: useEventListener Hook (Global & Element)

JavaScript: Deep Object Freeze (Recursive)

CSS: Center an Element

JavaScript: Debounce Function