[React] Copy to Clipboard ง่ายๆ ด้วย use-clipboard-copy

เจ้าของบล็อกได้เจอกับตัวช่วยที่จะทำให้การคัดลอกไปยังคลิปบอร์ดนั้นง่าย และรวดเร็วขึ้น แถมโค้ดยังสั้นอีกต่างหาก นั่นก็คือ use-clipboard-copy ซึ่งมันคืออะไรและจะมีการใช้งานอย่างไรบ้างนั้นก็ไปดูกันได้เลยค่ะ

สำหรับคนมีเวลาอ่านน้อย

• use-clipboard-copy เป็น Hook ในการคัดลอกไปยังคลิปบอร์ดโดยเรียกใช้ useClipboard() ผ่านตัวแปร
• ข้อดีของมันคือมีขนาดเล็ก เข้าใจได้ง่าย และโค้ดไม่ยาว
• รองรับหลายได้หลาย Browser แต่ยังมีฟังก์ชันสำหรับเช็คการรองรับมาให้ด้วย

กด 🔖 (Bookmark) ไว้อ่านทีหลังกันได้ถ้าไม่มีเวลา
ใครอยากเข้าใจมากขึ้นเริ่มอ่านบทความนี้ได้เลย 👇🏻

use-clipboard-copy คืออะไร

use-clipboard-copy เป็น React Hook อย่างหนึ่งสำหรับการเขียนฟังก์ชันคัดลอกไปยังคลิปบอร์ด โดยเจ้าตัว use-clipboard-copy นี้จะรองรับ React เวอร์ชัน 16.8.0 ขึ้นไป (สำหรับคนที่ยังไม่รู้จัก React Hook ลองไปอ่านที่ Introducing Hooks , React Hooks คืออะไร? + มาลองหัดใช้กันดีกว่า)

ข้อดี

• มีขนาดเล็ก (น้อยกว่า 1 KB) → เช็คขนาดและเวลาในการดาวน์โหลดได้ที่ https://bundlephobia.com/result?p=use-clipboard-copy@0.1.2
• ไม่ต้องโค้ดยาวๆ
• รองรับได้หลาย Browser เช่น Chrome, Firefox, Edge, Safari และ IE11

มาลองใช้กัน

อันดับแรกต้องติดตั้งแพ็คเกจ use-clipboard-copy ไปยังโปรเจกต์ของเราก่อน

npm install --save use-clipboard-copy

ต่อมาให้ import ตัว Hook จาก use-clipboard-copy ที่ชื่อ useClipboard มาใส่ในไฟล์

import { useClipboard } from 'use-clipboard-copy';

ประกาศตัวแปรเพื่อเรียกใช้ useClipboard สมมติให้ตัวแปรชื่อว่า clipboard

const clipboard = useClipboard();

👉🏼 การคัดลอกข้อความจาก Target Element

Component ตัวอย่างการคัดลอกไปยังคลิปบอร์ด

จากภาพเราต้องการจะคัดลอกข้อความ “verme.me” ไปยังคลิปบอร์ด ซึ่งอยู่ใน Target Element ด้วยการกดปุ่ม Copy to Clipboard จะโค้ดออกมาได้ดังข้างล่าง โดย

👉🏼 การคัดลอกข้อความโดยไม่มี Target Element

เจ้าของบล็อกจะขอยกตัวอย่างการคัดลอกเวลา ซึ่งจะมีความแตกต่างของค่าที่เปลี่ยนไปในแต่ละวินาที จึงไม่มีค่าที่ตายตัว ตามโค้ดด้านล่างนี้

👉🏼 เปลี่ยน State ของปุ่มเพื่อให้ User รู้ว่าได้กดคัดลอกแล้ว

โดยเจ้าของบล็อกต้องการให้ปุ่มเปลี่ยน State ในเวลา 800 milliseconds หากเกินจากนี้ปุ่มจะกลับมาเป็น State เดิม ตามโค้ดด้านล่างนี้

👉🏼 เช็ค Browser ว่ารองรับหรือไม่

เราทำได้โดยการใส่ isSupported() ลงไปเพื่อเช็ค ตัวอย่างเช่น

จริงๆ use-clipboard-copy ยังมีอีกหลายความสามารถให้ได้ใช้กัน ทุกคนสามารถเข้าไปดูเพิ่มเติมใน document ที่

wsmd/use-clipboard-copy

สรุป

ตัว use-clipboard-copy นี้เป็นตัวช่วยในการคัดลอกไปยังคลิปบอร์ดที่เจ้าของบล็อกเจอแล้วรู้สึกว่าเข้าได้ง่าย และทำได้ง่ายมากๆ ก็เลยอยากนำมาแนะนำให้ทุกคนได้ลองไปใช้กันดูบ้าง ซึ่งเจ้าของบล็อกก็หวังว่าผู้อ่านจะได้รับประโยชน์จากบล็อกนี้นะคะ หรือใครที่มีอะไรแนะนำก็สามารถแนะนำกันได้เลยค่ะ

ถ้าอยากเห็นผลลัพธ์ที่เป็นภาพมากขึ้นหรือดูเดโม่โค้ด สามารถไปดูได้ที่

ploypitch/try-use-clipboard

อย่าลืม 👏 (Claps) และ 🔖 (Bookmark) บทความนี้ไว้อ่านทีหลังด้วยนะคะ

Reference 📚

wsmd/use-clipboard-copy

use-clipboard-copy