@eviensoft/react-copy-to-clipboard-hook v0.0.7

@eviensoft/react-copy-to-clipboard-hook

A simple and lightweight React Hook to copy text to the clipboard, with built-in success and error state tracking.
Perfect for modern React and Next.js applications.

✨ Features

• 📋 Copy any text to the user's clipboard
• ✅ Success and error handling
• 🪶 Lightweight and dependency-free
• 🛡️ TypeScript support out of the box
• 🚀 Ready for production use

📦 Installation

npm install @eviensoft/react-copy-to-clipboard-hook
# or
yarn add @eviensoft/react-copy-to-clipboard-hook
# or
pnpm add @eviensoft/react-copy-to-clipboard-hook

🚀 Usage

import { useCopyToClipboard } from '@eviensoft/react-copy-to-clipboard-hook';

export default function CopyExample() {
  const { copy, status } = useCopyToClipboard();

  const handleCopy = () => {
    copy('Hello world from Eviensoft!');
  };

  return (
    <div>
      <button onClick={handleCopy}>Copy Text</button>
      {status.success && <p>✅ Copied successfully!</p>}
      {status.error && <p>❌ Error: {status.error}</p>}
    </div>
  );
}

📚 API

const { copy, status } = useCopyToClipboard();

🛠 Example with Auto-Clear Success Message

import { useCopyToClipboard } from '@eviensoft/react-copy-to-clipboard-hook';
import { useEffect } from 'react';

export default function AutoClearExample() {
  const { copy, status } = useCopyToClipboard();

  useEffect(() => {
    if (status.success) {
      const timer = setTimeout(() => {
        // Optionally reset success after 3 seconds
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [status.success]);

  return (
    <div>
      <button onClick={() => copy('Copied with Auto Clear!')}>Copy</button>
      {status.success && <p>✅ Copied!</p>}
    </div>
  );
}

You can extend this hook easily with auto-reset, toast notifications, or more advanced error handling as needed!

📄 License

This project is licensed under the MIT License.

🏢 About Eviensoft

At Eviensoft, we build lightweight, production-grade tools for modern web developers.
Feel free to check out more packages and tools soon!

🔥 Quick Summary Table (for your npm page)