사용자 정의 useCopyToClipboard React 연결을 만드는 방법

내 사이트에서, 리드 버거.com, 나는 사용자가 react-copy-to-clipboard라는 가방을 통해 내 글에서 코드를 복사할 수 있도록 허락한다.
사용자가 코드 세그먼트에 마우스를 걸고'클립보드'단추를 누르면 코드가 컴퓨터의 클립보드에 추가되어 어디에서든 코드를 붙이고 사용할 수 있습니다.

클립보드로 복사 다시 만들기

그러나 나는 제3자 라이브러리를 사용하고 싶지 않고 자신의 맞춤형 React 갈고리로 이 기능을 다시 만들고 싶다.내가 만든 모든 맞춤형 react 연결과 마찬가지로, 나는 그것을 전용 폴더에 넣을 것이다. 통상적으로 utils 또는 lib 라고 하는데, 이것은 내가 응용 프로그램에서 다시 사용할 수 있는 기능에 전문적으로 사용된다.
우리는 이 갈고리를 use Copy To Clipboard라는 파일에 넣을 것이다.js와 나는 같은 이름의 함수를 만들 것이다.또한 맨 위에 있는 React up을 가져오는지 확인합니다.
일부 텍스트를 사용자의 클립보드에 복사할 수 있는 여러 가지 방법이 있습니다.그러나 나는 이 점을 실현하기 위해 라이브러리를 사용하는 것을 더욱 좋아한다. 이것은 과정을 더욱 신뢰할 수 있게 한다copy-to-clipboard.
그것은 함수를 내보냅니다. 우리는 그것을 호출할 것입니다. copy

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

export default function useCopyToClipboard() {}

다음은 사용자 클립보드에 추가할 텍스트를 복사하는 함수를 만들 것입니다.우리는 이 함수 handleCopy 를 호출할 것이다.

handleCopy 기능 만들기

함수에서, 우리는 우선string이나number 형식의 데이터만 받아들일 수 있도록 확보해야 한다.문자열이나 숫자의 형식을 확보하기 위해if-else를 설정합니다.그렇지 않으면, 우리는 컨트롤러에 오류를 기록하여 사용자에게 다른 형식을 복사할 수 없다고 알려 줄 것이다.

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 를 생성할 것입니다. 그 중에서setter는 setCopy 호출될 것입니다.
처음에, 이 값은false입니다.텍스트 복사가 성공하면우리는 copy 을true로 설정합니다.그렇지 않으면, 우리는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];
}

useCopyToClipboard 사용

우리는 현재 우리가 좋아하는 모든 구성 요소에서 사용할 수 있다useCopyToClipboard.
나의 예에서, 나는 그것을 복사 단추 구성 요소와 함께 사용할 것이다. 이 구성 요소는 우리의 코드 세그먼트의 코드를 수신한다.
이 모든 일을 하기 위해서, 우리가 해야 할 일은 클릭 단추를 추가하는 것이다.handle coffee라는 함수를 되돌릴 때 코드를 텍스트로 요청합니다.일단 그것이 복제된다면, 그것은 정말이다.우리는 커피의 성공을 나타내는 또 다른 아이콘을 표시할 수 있다.

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>
  );
}

재설정 간격 추가

우리는 코드에 대해 개선을 진행할 수 있다.현재 우리가 쓰고 있는 갈고리와 같이 isCopied 는 항상 진실할 것이다. 이것은 우리가 항상 성공 아이콘을 볼 수 있다는 것을 의미한다.

만약 우리가 몇 초 후에 상태를 초기화하고 싶다면, 한 시간 간격으로 CopyToClipboard를 사용할 수 있습니다.이 기능을 추가하겠습니다.
갈고리로 돌아가면 resetInterval 이라는 매개 변수를 만들 수 있습니다. 기본값은 null 입니다. 매개 변수가 상태에 전달되지 않을 때 상태를 초기화하지 않습니다.
그리고 텍스트를 복사하고 리셋 간격이 있으면 useEffect 을 사용해서 isCopied 를 false로 다시 설정합니다.
또한 구성 요소가 마운트 해제에 갈고리를 사용한다면, 시간 초과를 제거해야 합니다. (이것은 우리의 상태가 더 이상 업데이트할 필요가 없다는 것을 의미합니다.)

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];
}

마지막으로, 우리가 할 수 있는 마지막 개선은 setTimeout 갈고리에 패키지handleCopy를 싸서 렌더링기가 있을 때마다 다시 만들지 않도록 하는 것이다.

최종 결과

이렇게 해서 우리는 주어진 시간 간격 후에 상태를 초기화할 수 있는 마지막 갈고리가 생겼다.만약 우리가 하나를 통과한다면, 우리는 반드시 결과를 보아야 한다.우리 밑에서 본 것처럼.

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>
  );
}

나는 네가 갈고리를 만드는 과정에서 뭔가를 배웠고, 네 자신의 개인 프로젝트에서 네가 좋아하는 모든 텍스트를 클립보드에 복사하기를 바란다.

이거 좋아요?React 캠프에 합류

The React Bootcamp 동영상, 메모지, 특별 보너스를 포함한 Learning React에 대한 모든 정보를 종합 패키지로 포장합니다.
수백 명의 개발자가 React를 파악하고, 꿈의 직장을 찾고, 미래를 관리하는 데 이미 사용된 내부 정보를 얻습니다.

열 때 알림을 받으려면 여기를 누르십시오