DEV Community

loading...

Make Copyable Code Block For Your Blog

phuctm97 profile image Minh-Phuc Tran Originally published at phuctm97.com ・1 min read

A couple of days ago I implemented a feature to allow viewers on my website to easily copy code blocks on my website. Personally, it is quite a useful feature
for a technical blog.

In this article, I'm going to share how you can implement the same for your sites - applicable to all React-based sites.

useCopyableRef hook

Thanks to React hook functionality, I've encapsulated the logic into an easily understandable and reusable hook:

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;
Enter fullscreen mode Exit fullscreen mode

It's simple, right?

Usage in UI components

useCopyableRef is similar to useRef, additionally, it returns isCopied and copy props, which you'd need to implement your UI components.

Implementing your UI components can be as simple as the following example:

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;
Enter fullscreen mode Exit fullscreen mode

That's it, don't forget to style your components however you want to!

Discussion (0)

pic
Editor guide