DEV Community

Bryan Liao
Bryan Liao

Posted on • Originally published at bryanliao.dev

Building in Public - 4

Continuing my data export journey from last time, I wanted to learn how to copy data to a clipboard. It’s a simple feature, but I always appreciate it when a site has click to copy buttons for code blocks, API keys, etc.

There’s a navigator object within the browser that contains access to the clipboard API. Using this API, one can copy designated text to the user’s clipboard (and paste too)! Here’s a simple implementation that I added to my app that utilized the writeText() function:

const context = {
    users: [{
        'id': 123,
        'name': 'user1'
        },
        {
        'id': 321,
        'name': 'user2'
        },
    ],
};

  const copyDataToClipboard = () => {
    navigator.clipboard.writeText(JSON.stringify(context)).then(() => {
      const copyButton = document.getElementById('copyButton');
      copyButton.innerHTML = 'Copied!';
      setTimeout(() => {
        copyButton.innerHTML = 'Click to copy data';
      }, 3000);
    });
  };

<button id='copyButton' onClick={() => copyDataToClipboard()}>Click to copy data</button>
Enter fullscreen mode Exit fullscreen mode

There’s an added bonus that it may feel safer to copy something to your clipboard and paste it into your own text file than to download one directly from a website 🙂

Top comments (0)