クリップボード

1import React from 'react';
2import CopyToClipboard from 'react-copy-to-clipboard';
3import { HiClipboard } from 'react-icons/hi';
4
5const Clipboard = () => {
6  return (
7    <div className="space-y-4">
8      <div>
9        <CopyToClipboard
10          text="Flock Examples"
11          onCopy={() => alert('Flock Examples という文字をコピーしました')}
12        >
13          <button className="inline-flex space-x-2 items-center text-sm hover:bg-gray-700 p-2 rounded right-4 opacity-60">
14            <HiClipboard className="text-white" />
15            <span>コピー</span>
16          </button>
17        </CopyToClipboard>
18      </div>
19      <input
20        type="text"
21        autoComplete="off"
22        className="bg-transparent rounded"
23        placeholder="貼り付けてみてください"
24      />
25    </div>
26  );
27};
28
29export default Clipboard;