どのようにカスタムusecopytoclipboard反応フックを作成する

私のウェブサイト(ReedBarger)で.COM、私はユーザーがパッケージの助けを借りて私の記事からコードをコピーすることができますと呼ばれるreact-copy-to-clipboard .
ユーザーはちょうどスニペットの上にホバリング、クリップボードのボタンをクリックし、コードを貼り付けると、コードを使用できるように、コンピュータのクリップボードには、どこでも好きです.

クリップボードに反応コピーを再現する

代わりに、サードパーティのライブラリを使用する代わりに、私は自分のカスタム反応フックでこの機能を再現したい.すべてのカスタム反応フックを作成すると、私はそれを専用のフォルダを置く、通常呼ばれるutils or lib , 具体的には、私は自分のアプリケーション全体を再利用することができます.
このフックをusecopytoclipboardというファイルに入れます.JSと私は同じ名前の機能を作ります.また、上部に反応をインポートすることを確認します.
いくつかのテキストをユーザーのクリップボードにコピーすることができます.しかし、私はこのためにライブラリを使用することを好むcopy-to-clipboard .
それは私たちが呼ぶ関数を輸出するcopy .

// utils/useCopyToClipboard.js
import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {}

次に、ユーザークリップボードに追加したいテキストをコピーするために使用する関数を作成します.この関数をコールしますhandleCopy .

ハンドレット機能の作成

関数の内部では、最初に確認する必要があります.私たちはifをセットします.そして、それはストリングがストリングか数のどちらかであることを確認するでしょう.他の種類をコピーできないユーザーに通知するコンソールにエラーをログ出力します.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {
  const [isCopied, setCopied] = React.useState(false);

  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      // copy
    } else {
      // don't copy
      console.error(
        `Cannot copy typeof ${typeof text} to clipboard, must be a string or number.`
      );
    }
  }
}

次にテキストを取り、それを文字列に変換します.copy 関数.そこから、我々は我々が我々のアプリケーションで好きなところで、我々をフックコピーからハンドルコピー機能を返したいです.一般的にhandleCopy 関数はonClick ボタンの.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard() {
  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
    } else {
      console.error(
        `Cannot copy typeof ${typeof text} to clipboard, must be a string or number.`
      );
    }
  }

  return handleCopy;
}

また、テキストがコピーされたかどうかを表す状態が必要です.それを作成するには、我々は呼び出すuseState 我々のフックの上部で、新しい状態変数を作ってくださいisCopied , セッターが呼ばれるところsetCopy .
最初はこの値はfalseになります.を返します.設定しますcopy である.それ以外の場合はfalseに設定します.
最後に、我々は戻りますisCopied と一緒に配列内のフックからhandleCopy .

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard(resetInterval = null) {
  const [isCopied, setCopied] = React.useState(false);

  function handleCopy(text) {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
      setCopied(true);
    } else {
      setCopied(false);
      console.error(
        `Cannot copy typeof ${typeof text} to clipboard, must be a string or number.`
      );
    }
  }

  return [isCopied, handleCopy];
}

USEopyToClipboardの使用

今すぐ使えるuseCopyToClipboard 我々が好きであるどんな構成の範囲内ででも.
私のケースでは、私たちのコードスニペットのコードを受け取ったコピーボタンコンポーネントを使用します.
この作業を行うには、ボタンをクリックするだけです.そして、ハンドルコーヒーと呼ばれる関数のリターンで、それはテキストとしてそれに尋ねました.そして、一旦それがコピーされるならば、それは真実です.我々は、コーヒーが成功したことを示す別のアイコンを見ることができます.

import React from "react";
import ClipboardIcon from "../svg/ClipboardIcon";
import SuccessIcon from "../svg/SuccessIcon";
import useCopyToClipboard from "../utils/useCopyToClipboard";

function CopyButton({ code }) {
  const [isCopied, handleCopy] = useCopyToClipboard();

  return (
    <button onClick={() => handleCopy(code)}>
      {isCopied ? <SuccessIcon /> : <ClipboardIcon />}
    </button>
  );
}

リセット間隔の追加

私たちがコードを作ることができる1つの改善があります.我々が現在フックを書いたので.isCopied 常にtrueになり、成功アイコンが表示されます.

数秒後に状態をリセットしたい場合は、usecopytoclipボードに時間間隔を渡すことができます.その機能を加えましょう.
私たちのフックに戻ると、私たちはresetInterval , デフォルトの値null , 引数が渡されなかった場合、状態はリセットされません.
それから、我々は加えますuseEffect テキストがコピーされ、リセット間隔が設定されている場合はisCopied を返しますsetTimeout .
また、フックがunmountsで使用されているコンポーネント(私たちの状態はもはや更新する必要はありません)を使用する場合は、そのタイムアウトをクリアする必要があります.

import React from "react";
import copy from "copy-to-clipboard";

export default function useCopyToClipboard(resetInterval = null) {
  const [isCopied, setCopied] = React.useState(false);

  const handleCopy = React.useCallback((text) => {
    if (typeof text === "string" || typeof text == "number") {
      copy(text.toString());
      setCopied(true);
    } else {
      setCopied(false);
      console.error(
        `Cannot copy typeof ${typeof text} to clipboard, must be a string or number.`
      );
    }
  }, []);

  React.useEffect(() => {
    let timeout;
    if (isCopied && resetInterval) {
      timeout = setTimeout(() => setCopied(false), resetInterval);
    }
    return () => {
      clearTimeout(timeout);
    };
  }, [isCopied, resetInterval]);

  return [isCopied, handleCopy];
}

最後に、我々ができる最後の改善はラップすることですhandleCopy にuseCallback フックは、それがrerenderがあるたびに再現されないことを確認するために.

最終結果

そして、それで、我々は最終的なフックを持ちます.そして、それは与えられた時間間隔の後、状態がリセットされるのを許します.我々がそれに1を渡すならば、我々は結果を見るべきです.以下のように.

import React from "react";
import ClipboardIcon from "../svg/ClipboardIcon";
import SuccessIcon from "../svg/SuccessIcon";
import useCopyToClipboard from "../utils/useCopyToClipboard";

function CopyButton({ code }) {
  // isCopied is reset after 3 second timeout
  const [isCopied, handleCopy] = useCopyToClipboard(3000);

  return (
    <button onClick={() => handleCopy(code)}>
      {isCopied ? <SuccessIcon /> : <ClipboardIcon />}
    </button>
  );
}

私は私たちのフックを作成するこのプロセスを通じていくつかのことを学んだとあなた自身の個人的なプロジェクトを通してそれを使用してクリップボードに任意のテキストをコピーしてください.

このポストをお楽しみください。反応ブートキャンプに加わってください

The React Bootcamp あなたが反応を学習し、ビデオ、チートシート、プラス特別ボーナスを含む1つの包括的なパッケージにバンドルを知っておくべきすべてを取ります.
ゲインインサイダー情報何百もの開発者はすでに反応をマスターするために使用して、彼らの夢の仕事を見つけて、将来の制御を取る:

それが開くとき、知らせられるために、ここをクリックしてください