🧩 usehooks

A modern collection of production-grade React hooks built with performance, correctness, and developer experience in mind.

This library is designed as a learning-driven yet real-world-ready implementation of commonly used hooks, focusing on robust architecture, strict type safety, and predictable behavior.

✨ Features

• ⚛️ Built for React 18+
• 🧠 Strict Mode & Concurrent Rendering safe
• 🧾 Fully written in TypeScript
• ⚡ Optimized to avoid unnecessary re-renders
• 🧩 Small, composable, and tree-shakable hooks
• 🛠 Designed with production-grade patterns

📦 Installation

Using npm

npm install @advide2001/usehooks

Using pnpm

pnpm add @advide2001/usehooks

Using yarn

yarn add @advide2001/usehooks

🚀 Usage

useRandomInterval

Executes a callback repeatedly at randomised intervals between minDelay and maxDelay milliseconds. Internally uses recursive setTimeout — not setInterval — so each execution waits for a fresh random delay. Supports an enabled flag for pausing and returns a stop function for imperative cancellation.

import { useRandomInterval } from '@advide2001/usehooks';

function SparkleEffect() {
  const [sparkles, setSparkles] = React.useState<number[]>([]);
  const [active, setActive] = React.useState(true);

  // Fires every 500–2000ms at random — mimics a natural, non-mechanical cadence
  const stop = useRandomInterval(
    () => {
      const id = Date.now();
      setSparkles((prev) => [...prev.slice(-4), id]); // keep last 5
    },
    { minDelay: 500, maxDelay: 2000, enabled: active },
  );

  return (
    <div>
      <div className="canvas">
        {sparkles.map((id) => (
          <span key={id} className="sparkle">
            ✨
          </span>
        ))}
      </div>
      <button onClick={() => setActive((a) => !a)}>{active ? 'Pause' : 'Resume'}</button>
      {/* Imperatively stop and never restart */}
      <button onClick={stop}>Stop permanently</button>
    </div>
  );
}

Note: minDelay must be ≥ 0 and ≤ maxDelay. Invalid configurations are ignored with a console.warn in development. The hook is also SSR-safe — it skips scheduling when window is undefined.

| Parameter | Type | Description | | ------------------ | ------------ | ------------------------------------------------------- | | callback | () => void | Function to call on each tick | | options.minDelay | number | Minimum delay in milliseconds | | options.maxDelay | number | Maximum delay in milliseconds | | options.enabled | boolean | (optional, default true) Pause/resume the interval | | Returns | () => void | A stop function that cancels the interval immediately |

🛠 Development

Clone the repository:

git clone https://github.com/advide2001/usehooks.git
cd usehooks

Install dependencies:

npm install

Run tests:

npm run test

Build the library:

npm run build

🤝 Contributing

Contributions are welcome and appreciated!

If you'd like to contribute:

1. Fork the repository
2. Create a new branch (feature/your-feature)
3. Make your changes
4. Write or update tests if needed
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

⭐ Support

If you find this project useful:

• ⭐ Star the repository
• 🐛 Report issues
• 💡 Suggest improvements