{"library":"react-copy-to-clipboard-lite","title":"React Copy to Clipboard Lite","description":"react-copy-to-clipboard-lite is a lightweight (approx. 1.1 kB minzipped), dependency-free utility for copying text to the clipboard in React applications, currently at version 1.0.3. It offers a tiered fallback mechanism, utilizing the modern Clipboard API first and gracefully falling back to `document.execCommand` for older browsers like Safari, without relying on deprecated `prompt()` calls for permissions. The library provides structured `CopyResult` objects for robust error handling and never throws exceptions. It is designed to be SSR-safe, permission-aware (checking `navigator.permissions.query()` without prompting), and fully supports React 18+ environments, including new React 19 features like `formAction` and `useActionState`. This package differentiates itself through its minimal footprint, lack of runtime dependencies, and explicit handling of permissions and SSR contexts.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-copy-to-clipboard-lite"],"cli":null},"imports":["import { copyToClipboard } from 'react-copy-to-clipboard-lite';","import { useCopyToClipboard } from 'react-copy-to-clipboard-lite/react';","import { CopyToClipboard } from 'react-copy-to-clipboard-lite/react';","import { copyToClipboardAction } from 'react-copy-to-clipboard-lite/react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { useCopyToClipboard } from 'react-copy-to-clipboard-lite/react';\n\nfunction MyCopyButton() {\n  const [textToCopy, setTextToCopy] = useState('Default text to copy');\n  const { copy, copied, error, reset } = useCopyToClipboard({ timeout: 2000, clearAfter: 5000 });\n\n  const handleCopy = async () => {\n    const result = await copy(textToCopy);\n    if (result.success) {\n      console.log('Successfully copied:', result.method);\n    } else {\n      console.error('Failed to copy:', result.code, result.error);\n    }\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={textToCopy}\n        onChange={(e) => setTextToCopy(e.target.value)}\n        placeholder=\"Enter text to copy\"\n        aria-label=\"Text to copy\"\n      />\n      <button onClick={handleCopy} disabled={copied}>\n        {copied ? 'Copied!' : 'Copy Text'}\n      </button>\n      {error && <p style={{ color: 'red' }}>Error copying: {error.code}</p>}\n      {copied && <button onClick={reset}>Reset Copy Status</button>}\n    </div>\n  );\n}\n\nexport default MyCopyButton;","lang":"typescript","description":"Demonstrates how to use the `useCopyToClipboard` React hook to add copy-to-clipboard functionality to a button, including handling copy status and potential errors.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}