React Hooks useClipboard

Table of Contents

Perkenalan
Membuat Folder
Membuat Hooks

Perkenalan

Kali ini saya akan membagikan bagaimana saya membuat fungsi copy to clipboard menggunakan React Hooks useClipboard.

Membuat Folder

Hal pertama yang harus kita lakukan adalah membuat folder hooks dalam folder src. Apabila Anda tidak menggunakan folder src, Anda bisa langsung membuat folder hooks.

/
└-- src/
    |-- ...
    |-- hooks/
    |   └-- useClipboard.js (atau useClipboard.ts)
    └-- ...

Membuat Hooks

Selanjutnya kita akan membuat fungsi useClipboard yang akan kita gunakan.

const useClipboard = () => {
  const copy = async (txt) => {
    try {
      await navigator.clipboard.writeText(txt)
      alert('Copied to clipboard!') // Anda dapat merubah line ini menjadi notifikasi yang lebih baik
    } catch (err) {
      alert('Failed to copy to clipboard!') // Anda dapat merubah line ini menjadi notifikasi yang lebih baik
    }
  }

  return { copy }

}

export default useClipboard

Penggunaan

Lalu bagaimana cara menggunakannya? berikut adalah cara menggunakannya.

'use client'; // Jika Anda menggunakan Next.js App Router
import React from 'react';

import useClipboard from '@/hooks/useClipboard';

const Page = () => {
  const { copy } = useClipboard();

  return (
    <section className="flex items-center justify-center mx-auto min-h-screen">
      <button
        type="button"
        onClick={() => copy('Hello, world!')}
        className="p-2 m-2 text-white bg-blue-500 rounded-md"
      >
        Copy to clipboard
      </button>
    </section>
  );
};

export default Page;

Ikuti Saya!

Github Instagram X Linkedin Email