블로그에 복사 가능한 코드 블록 만들기

며칠 전에 my website의 시청자가 내 웹사이트에서 코드 블록을 쉽게 복사할 수 있는 기능을 구현했습니다. 개인적으로 상당히 유용한 기능입니다
기술 블로그용.

이 기사에서는 모든 React 기반 사이트에 적용할 수 있는 동일한 기능을 사이트에 구현하는 방법을 공유하겠습니다.

useCopyableRef 후크

React 훅 기능 덕분에 로직을 이해하기 쉽고 재사용 가능한 훅으로 캡슐화했습니다.

import { useRef, useState } from "react";
import copyToClipboard from "copy-to-clipboard"; // You'll need this package: `yarn add copy-to-clipboard`.

const useCopyableRef = <T extends HTMLElement = HTMLElement>(
  delay: number = 4 * SECONDS // You may want to change this to 4000, or define SECONDS somewhere in your application.
) => {
  const ref = useRef<T>(null);

  const [isCopied, setCopied] = useState(false);
  const copy = () => {
    if (isCopied) return;

    if (!ref.current) throw new Error("Ref is nil.");
    copyToClipboard(ref.current.textContent || "");

    setCopied(true);
    setTimeout(() => setCopied(false), delay);
  };

  return { ref, isCopied, copy };
};

export default useCopyableRef;

간단하죠?

UI 구성 요소에서의 사용

useCopyableRef 는 useRef 와 유사하며 추가로 UI 구성 요소를 구현하는 데 필요한 isCopied 및 copy 소품을 반환합니다.

UI 구성 요소를 구현하는 것은 다음 예제와 같이 간단할 수 있습니다.

import useCopyableRef from "~/hooks/useCopyableRef";

const CodeBlock = (props: React.HTMLProps<HTMLPreElement>) => {
  const { ref, isCopied, copy } = useCopyableRef<HTMLPreElement>();
  return (
    <>
      <pre ref={ref} {...props} />
      <button onClick={copy} disabled={isCopied}>
        {isCopied ? "Copied!" : "Copy"}
      </button>
    </>
  );
};

export default CodeBlock;

그게 다야, 원하는 대로 구성 요소의 스타일을 지정하는 것을 잊지 마세요!