Copy with Text Morph - Code Blocks

Preview

Preparing…

Introduction

In this block, we'll create a copy button with animated text using Motion-Primitives by Julien Thibeaut. The button will morph between "Copy" and "Copied" when clicked, providing visual feedback to the user.

Installation

shadcn/ui

shadcn/ui Command

pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/block-copy-text-morph.json

Manual

Install motion:

Motion

pnpm i motion

Create the basic Code Block structure:

react

Code Block

The main structure of the Code Block component with header and content areas.

Create the CodeblockShiki client component:

react

Code Block Client with Shiki

Create a client-side Code Block component using Shiki for syntax highlighting.

Finally, create the CopyTextMorph component:

block-copy-text-morph

"use client";

import { cn } from "@/utils/cn";
import { copyToClipboard } from "@/utils/copy";
import { TextMorph } from "@/components/ui/text-morph";
import { useEffect, useState, type ComponentProps } from "react";

interface CopyTextAnimatedProps extends ComponentProps<"button"> {
  content: string;
  size?: "xs" | "sm";
}

const CopyTextMorph = ({
  content,
  size = "sm",
  className,
  ...props
}: CopyTextAnimatedProps) => {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  useEffect(() => {
    if (!isCopied) return;

    const timeout = setTimeout(() => {
      setIsCopied(false);
    }, 2000);
    return () => clearTimeout(timeout);
  }, [isCopied]);

  const handleCopy = async () => {
    await copyToClipboard(content);
    setIsCopied(true);
  };

  return (
    <button
      title="Copy to clipboard"
      className={cn(
        "cursor-pointer",
        "transition-colors duration-200 ease-in-out",
        "text-neutral-700 hover:text-neutral-950 dark:text-neutral-300 dark:hover:text-neutral-50",
        "rounded-md bg-neutral-300/60 px-1.5 py-1 dark:bg-neutral-700/60",
        "border border-transparent hover:border-neutral-400/60 dark:hover:border-neutral-600/60",
        size === "xs" && "text-xs",
        size === "sm" && "text-sm",
        isCopied && "text-neutral-950 dark:text-neutral-50",
        className,
      )}
      onClick={handleCopy}
      {...props}
    >
      <TextMorph>{isCopied ? `Copied` : `Copy`}</TextMorph>
    </button>
  );
};

export { CopyTextMorph };

Usage

import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";

const Example = () => {
  return <CopyTextMorph content="Text to be copied" />;
};

export default Example;

Or with <CodeBlock> component:

import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockContent,
} from "@/components/code-block/code-block";
import { CopyTextMorph } from "@/components/code-block/blocks/copy-text-morph";

const code = `const greet = () => {
  console.log("Hello, World!");
};`;

const Example = () => {
  return (
    <CodeBlock>
      <CodeBlockHeader>
        <CopyTextMorph content={code} />
      </CodeBlockHeader>
      <CodeBlockContent>
        <CodeblockShiki language="ts" code={code} />
      </CodeBlockContent>
    </CodeBlock>
  );
};
export default Example;

Props

React Props

Prop	Type	Required
content	string	Yes
size	"xs" \| "sm"	No
Included: DOMAttributes