跳至主要内容

useCopyToClipboard

將文本複製到用戶的剪貼板。

別名

useCopyToClipboarduseClipboard 的別名。它們具有相同的功能和 API。

用法

即時編輯器
function Demo() {
  const [value, setValue] = useState("");
  const [text, copy] = useCopyToClipboard();
  const permissionRead = usePermission("clipboard-read");
  const permissionWrite = usePermission("clipboard-write");
  return (
    <div>
      <p>
        剪貼板權限: 讀取 <b>{permissionRead}</b> | 寫入&nbsp;
        <b>{permissionWrite}</b>
      </p>
      <p>
        當前複製的內容: <code>{text || "無"}</code>
      </p>
      <input
        value={value}
        onChange={(event) => {
          setValue(event.currentTarget.value);
        }}
      />
      <button onClick={() => copy(value)}>複製</button>
    </div>
  );
};

結果

剪貼板權限: 讀取 prompt | 寫入 granted

當前複製的內容:

API

useClipBoard

Returns

readonly [string, (txt: string) => Promise<void>]: 返回唯讀元組.

Arguments

Squarespace
Squarespace makes your marketing, customer management, and checkout flow effortless—all on a single platform.
Get Started