@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
51 lines (50 loc) • 1.99 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { Check, Copy } from "lucide-react";
import { cn } from "../../lib/utilities.js";
import copy_button_module from "./copy-button.module.js";
import * as __rspack_external_react from "react";
const CopyButton = /*#__PURE__*/ __rspack_external_react.forwardRef(({ value, timeout = 2000, className, onClick, disabled, ...props }, ref)=>{
const [copied, setCopied] = __rspack_external_react.useState(false);
const timeoutRef = __rspack_external_react.useRef(null);
__rspack_external_react.useEffect(()=>()=>{
if (null !== timeoutRef.current) globalThis.clearTimeout(timeoutRef.current);
}, []);
const handleCopy = __rspack_external_react.useCallback(async (event)=>{
onClick?.(event);
const { clipboard } = globalThis.navigator;
if (event.defaultPrevented || disabled || !clipboard?.writeText) return;
try {
await clipboard.writeText(value);
setCopied(true);
if (null !== timeoutRef.current) globalThis.clearTimeout(timeoutRef.current);
timeoutRef.current = globalThis.setTimeout(()=>{
setCopied(false);
}, timeout);
} catch {}
}, [
disabled,
onClick,
timeout,
value
]);
return /*#__PURE__*/ jsx("button", {
ref: ref,
type: "button",
"aria-label": copied ? "Copied" : "Copy to clipboard",
className: cn(copy_button_module.copyButton, className),
disabled: disabled,
onClick: handleCopy,
...props,
children: copied ? /*#__PURE__*/ jsx(Check, {
"aria-hidden": "true",
className: copy_button_module.icon
}) : /*#__PURE__*/ jsx(Copy, {
"aria-hidden": "true",
className: copy_button_module.icon
})
});
});
CopyButton.displayName = "CopyButton";
export { CopyButton };
//# sourceMappingURL=copy-button.js.map