React CopyToClipboard component

A quick post documenting a simple CopyToClipboard component I created this week. It allows users to create a git branch slug when working on a story.

Click the Clipboard Icon button and the user gets a git branch command copied to their clipboard, simply but very handy. For example it generates:

git checkout -b st-270-write-blog-post

Paste the command into the command line and we're off to the races 😀

It also shows a temporary message to the user to notify them that the copy was successful.

Usage

Supply the component with a getText function that returns the text you want to copy to the clipboard. In this case we're generating a git slug but it can be any string you like.

...
<CopyToClipboard getText={() => slugify(`${screenId}-${heading}`)} />
...

Component Code

This is a Functional React component using Typescript. We use the Clipboard API navigator.clipboard to access the system clipboard.

import React, { useState } from 'react';

import { IconClipboard } from '../Icons';

export type Props = {
  getText: () => string;
};
export const CopyToClipboard: React.FC<Props> = ({ getText }) => {
  const [copied, setCopied] = useState(false);

  const handleClick = () => {
    navigator.clipboard
      .writeText(getText())
      .then(() => {
        setCopied(true);
        setTimeout(() => {
          setCopied(false);
        }, 1000);
      })
      .catch(error => console.log('Handle the error better than this :-)'));
  };

  return (
    <>
      <button onClick={handleClick}>
        <IconClipboard />
      </button>
      {copied && <p>Copied!</p>}
    </>
  );
};

Check my previous post on how to get the clipboard icons for the button 🙂

How to use Heroicons in your React app

React CopyToClipboard component

Comments

More from this blog

Basic Jest and Typescript setup

Step-by-Step: Setting Up a Postgres Database with Docker and Seeding Test Data

SvelteKit - Create & Update

REST API in Kotlin & Spring Boot

Koan Wars: Kotlin vs TypeScript - Scrabble

Usage

Component Code

Command Palette

Comments

More from this blog

Usage

Component Code