📘 Useful Hooks React

A collection of useful React hooks for everyday development.
Includes hooks for debounce, throttle, localStorage, online status, and clipboard operations.

🔥 Features

• useDebounce – Debounce any value or input
• useThrottle – Throttle updates efficiently
• useLocalStorage – Persist state in browser localStorage
• useOnlineStatus – Detect online/offline status
• useCopyToClipboard – Copy text to clipboard easily

⚡ Installation

npm install useful-hooks-react

or with Yarn:

yarn add useful-hooks-react

🚀 Usage Examples

useDebounce

import { useDebounce } from "useful-hooks-react";
import React, { useState, useEffect } from "react";

function SearchBox() {
  const [value, setValue] = useState("");
  const debounced = useDebounce(value, 500);

  useEffect(() => {
    console.log("Send API call with:", debounced);
  }, [debounced]);

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

useThrottle

import { useThrottle } from "useful-hooks-react";
import React, { useState, useEffect } from "react";

function ScrollTracker() {
  const [scroll, setScroll] = useState(0);
  const throttledScroll = useThrottle(scroll, 300);

  useEffect(() => {
    console.log("Scroll position:", throttledScroll);
  }, [throttledScroll]);

  return (
    <div style={{ height: "200vh" }} onScroll={e => setScroll(e.currentTarget.scrollTop)}>
      Scroll me
    </div>
  );
}

useLocalStorage

import { useLocalStorage } from "useful-hooks-react";

function NameSaver() {
  const [name, setName] = useLocalStorage("name", "Guest");

  return <input value={name} onChange={e => setName(e.target.value)} placeholder="Enter your name" />;
}

useOnlineStatus

import { useOnlineStatus } from "useful-hooks-react";

function StatusIndicator() {
  const online = useOnlineStatus();

  return <div>User is {online ? "Online" : "Offline"}</div>;
}

useCopyToClipboard

import { useCopyToClipboard } from "useful-hooks-react";

function CopyButton() {
  const [copied, copy] = useCopyToClipboard();

  return (
    <div>
      <button onClick={() => copy("Hello World!")}>Copy Text</button>
      {copied && <span>Copied: {copied}</span>}
    </div>
  );
}

📂 Directory Structure

useful-hooks-react/
 ├── src/
 │   ├── useDebounce.ts
 │   ├── useThrottle.ts
 │   ├── useLocalStorage.ts
 │   ├── useOnlineStatus.ts
 │   ├── useCopyToClipboard.ts
 │   └── index.ts
 ├── __tests__/
 │   ├── useDebounce.test.tsx
 │   ├── useLocalStorage.test.tsx
 │   └── useOnlineStatus.test.tsx
 ├── package.json
 ├── tsconfig.json
 ├── jest.config.js
 ├── README.md
 └── .gitignore

🧪 Running Tests

npm install
npm test

🌐 Links

• Repository: https://github.com/AhmadRezaBarfarazi/useful-hooks-react
• Homepage: https://github.com/AhmadRezaBarfarazi/useful-hooks-react#readme
• Issues: https://github.com/AhmadRezaBarfarazi/useful-hooks-react/issues

📈 Badges

📝 License

MIT

💖 Donate / Support

If you find useful-hooks-react helpful and want to support its development, you can send donations via Bitcoin:

Send directly (Trust Wallet or other wallets that support BTC):
bitcoin:bc1qyaxus4f2mvgy76r4xuw3skv9mshtxpy8cemqhn

QR Code (Scan to send):

Pay me via Trust Wallet:
Click here to donate

Your donations help cover hosting costs, development time, and further improvements of this package. Every contribution is greatly appreciated!