kit-hooks

A minimal, dependency-free collection of custom React hooks that simplify common UI logic like window resizing, clipboard access, modal management, and toggling.
Perfect for clean, scalable, and reusable components in any React project.

🚀 Features

• ✅ Plug-and-play React hooks for everyday UI needs
• ✅ Works with React, Next.js, Vite, CRA, etc.
• ✅ TypeScript-ready
• ✅ No external dependencies
• ✅ Designed for both small and large-scale projects

📦 Installation

Install via npm:

npm install kit-hooks

Or via yarn:

yarn add kit-hooks

🔧 Hooks & Usage

1. useWindowSize

Tracks window width and height in real-time. Automatically updates on resize.

Returns

{ width: number, height: number }

Example

import { useWindowSize } from 'kit-hooks';

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

  return (
    <div>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

2. useElementSize

Tracks the width and height of any individual DOM element.

Returns

{
  ref: RefObject<T>;
  size: { width: number; height: number };
}

Example (Single Element)

import { useElementSize } from 'kit-hooks';

function Box() {
  const { ref, size } = useElementSize<HTMLDivElement>();

  return (
    <div ref={ref} style={{ resize: "both", overflow: "auto", padding: "20px", border: "1px solid black" }}>
      <p>Width: {size.width}px</p>
      <p>Height: {size.height}px</p>
    </div>
  );
}

Example (Multiple Elements)

import { useElementSize } from 'kit-hooks';

function MultiBox() {
  const { ref: ref1, size: size1 } = useElementSize<HTMLDivElement>();
  const { ref: ref2, size: size2 } = useElementSize<HTMLDivElement>();

  return (
    <div>
      <div ref={ref1} style={{ width: '60%', height: '100px', background: '#f9c' }}>
        <p>Div 1: {size1.width} x {size1.height}</p>
      </div>

      <div ref={ref2} style={{ width: '40%', height: '150px', background: '#9cf', marginTop: '1rem' }}>
        <p>Div 2: {size2.width} x {size2.height}</p>
      </div>
    </div>
  );
}

3. useClipboard

Copy text to clipboard and track copy status.

Returns

{
  copied: boolean;
  copy: (text: string) => void;
}

Example

import { useClipboard } from 'kit-hooks';

function CopyButton() {
  const { copied, copy } = useClipboard();

  return (
    <button onClick={() => copy('Copied Text!')}>
      {copied ? 'Copied!' : 'Copy Text'}
    </button>
  );
}

🧪 Compatibility

• ✅ React 16.8+ (with Hooks support)
• ✅ TypeScript & JavaScript
• ✅ SSR-compatible (Next.js, Remix)
• ✅ Works with any bundler: Vite, Webpack, CRA, etc.

📃 License

MIT License © 2025 Babu Hariharan
You are free to use, modify, and distribute this project under the terms of the MIT license.

🤝 Contributing

Found a bug or want to add a new hook?
Feel free to open an issue or submit a PR to help improve this library.

🌐 Author

Built and maintained by [Babu Hariharan]
If you like this project, don’t forget to ⭐ the repo!