Clipboard
Native တွင် @capacitor/clipboard နှင့် web တွင် navigator.clipboard သို့ ချိတ်ဆက်ပေးပါသည်။
- Methods: readText(), writeText(text), requestPermission()
- Clipboard ဖတ်ခြင်းတွင် user gesture နှင့် permission လိုအပ်နိုင်ပါသည်
TSXClipboard — React
1import { useState } from "react";
2import { Clipboard, toast } from "@quan-erp/shared-frontend-core";
3
4export function CopyField({ value }: { value: string }) {
5 const [pasted, setPasted] = useState("");
6 const clipboard = Clipboard.instance;
7
8 async function copy() {
9 try {
10 await clipboard.requestPermission();
11 await clipboard.writeText(value);
12 toast.success("Copied");
13 } catch (e) {
14 toast.error((e as Error).message ?? "Copy failed");
15 }
16 }
17
18 async function paste() {
19 try {
20 await clipboard.requestPermission();
21 const text = await clipboard.readText();
22 setPasted(text ?? "");
23 } catch (e) {
24 toast.error((e as Error).message ?? "Paste failed");
25 }
26 }
27
28 return (
29 <div>
30 <button type="button" onClick={() => void copy()}>
31 Copy
32 </button>
33 <button type="button" onClick={() => void paste()}>
34 Paste
35 </button>
36 <span>{pasted}</span>
37 </div>
38 );
39}