@bonhomie/useful-hooks

A clean, production-ready collection of React hooks used every day in modern applications.
Minimal, fast, dependency-free, and built for real-world React development.

📦 Installation

npm install @bonhomie/useful-hooks
or
yarn add @bonhomie/useful-hooks



<!-- useLocalStorage -->
import { useLocalStorage } from "@bonhomie/useful-hooks";

function App() {
  const [name, setName] = useLocalStorage("name", "Bonhomie");

  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}


<!-- useDarkMode -->
import { useDarkMode } from "@bonhomie/useful-hooks";

function ThemeToggle() {
  const { dark, setDark } = useDarkMode();

  return (
    <button onClick={() => setDark(!dark)}>
      {dark ? "Switch to Light" : "Switch to Dark"}
    </button>
  );
}


<!-- useDebounce -->
import { useDebounce } from "@bonhomie/useful-hooks";

function SearchBox() {
  const [query, setQuery] = useState("");
  const debounced = useDebounce(query, 400);

  useEffect(() => {
    if (!debounced) return;
    // Call API here
    console.log("Searching for:", debounced);
  }, [debounced]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

<!-- useThrottle -->
import { useThrottle } from "@bonhomie/useful-hooks";

function ScrollTracker() {
  const [pos, setPos] = useState(0);
  const throttledPos = useThrottle(pos, 200);

  useEffect(() => {
    const handler = () => setPos(window.scrollY);
    window.addEventListener("scroll", handler);
    return () => window.removeEventListener("scroll", handler);
  }, []);

  return <div>Scroll Y: {throttledPos}</div>;
}

<!-- useToggle -->
import { useToggle } from "@bonhomie/useful-hooks";

function Example() {
  const { value, toggle, setTrue, setFalse } = useToggle();

  return (
    <div>
      <p>{value ? "ON" : "OFF"}</p>

      <button onClick={toggle}>Toggle</button>
      <button onClick={setTrue}>Set ON</button>
      <button onClick={setFalse}>Set OFF</button>
    </div>
  );
}


<!-- useClickOutside -->
import { useRef } from "react";
import { useClickOutside } from "@bonhomie/useful-hooks";

function Dropdown() {
  const ref = useRef(null);
  const { value, toggle, setFalse } = useToggle();

  useClickOutside(ref, () => setFalse());

  return (
    <div>
      <button onClick={toggle}>Menu</button>

      {value && (
        <div ref={ref} className="dropdown">
          <p>Item 1</p>
          <p>Item 2</p>
        </div>
      )}
    </div>
  );
}

<!-- useWindowSize -->
import { useWindowSize } from "@bonhomie/useful-hooks";

function Component() {
  const { width, height } = useWindowSize();

  return (
    <p>
      Screen: {width} × {height}
    </p>
  );
}


<!-- useCopyToClipboard -->
import { useCopyToClipboard } from "@bonhomie/useful-hooks";

function Referral() {
  const { copied, copy } = useCopyToClipboard();

  return (
    <div>
      <button onClick={() => copy("BONHOMIE-123")}>
        {copied ? "Copied!" : "Copy Code"}
      </button>
    </div>
  );
}

<!-- useAsync -->
import { useAsync } from "@bonhomie/useful-hooks";

function ProfileLoader() {
  const fetchUser = () => fetch("/api/user").then(res => res.json());

  const { execute, loading, error, value } = useAsync(fetchUser, []);

  useEffect(() => {
    execute();
  }, [execute]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading profile</p>;

  return <pre>{JSON.stringify(value, null, 2)}</pre>;
}


<!-- useFetch -->
import { useFetch } from "@bonhomie/useful-hooks";

function Users() {
  const { data, loading, error, refetch } = useFetch("/api/users");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error fetching users</p>;

  return (
    <div>
      <button onClick={refetch}>Refresh</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
<!-- Advance example with post, useFetch -->
useFetch("/api/auth/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password }),
});