CODEWITHSUNDEEP
javascript
sara lance
sara lance

Reputation: 603

Feedback when text is copied to the clipboard

I have this React component that copies text to the clipboard. How can I give feedback to the user when the text is copied to the clipboard?

export default function Share() {
  return (

      <button
        title="Share"
        type="button"
        onClick={() =>
          navigator.clipboard.writeText("Copy text")
        }
      > Share
      </button>
  );
}

Upvotes: 0

Views: 1377

Answers (2)

Tim Rasim
Tim Rasim

Reputation: 684

Despite the technical character of this question I would like to give a UX viewpoint on this. In my personal opinion Alerts are bad for nearly every user interaction since it is a disruptive message (user has to interact to proceed).

In this concrete example I would advice to rename the button instead of showing an alert as a simple non-disruptive user feedback. The great benefit is, that the users focus will be on the button when clicking it, so even small changes will be immediately recognized and contextually understood.

Alternatevely, if the button has to be reused and can't be renamed, you could look into https://www.npmjs.com/package/react-toastify to show a toast that will not block following user interactions.

Upvotes: 1

Helix
Helix

Reputation: 197

You can show alert

export default function Share() {
    return (
        <button
            title="Share"
            type="button"
            onClick={() => {
                navigator.clipboard.writeText('Copy text').then(() => {
                    alert('Text copied to clipboard');
                });
            }}
        >
            Share
        </button>
    );
}

Upvotes: 1

Related Questions