Manage your customers’ clipboards with React hooks.

Modern web applications have an abundance of tools available for improving user experience. When implementing a new feature, a sizable chunk of UI/UX discussion is typically devoted to reducing the number of necessary clicks and keystrokes required to perform a task. The ability to automate the repetitive or predictable behavior is one of the largest driving forces behind the software industry, and I think it is beautiful that we have blossomed from calculators saving hours of error-prone manual labor to user interfaces automating seconds.

It is no shock that most large projects inevitably reach a point where we can predict that the user is going to want to copy or paste something, and we inevitably attempt to automate that workflow. Clipboard interactions are one of the oldest attempts to hijack a user’s system for their own good, and it is time that these APIs integrate with React.

In this article, I will walk through how I created use-clippy, a React Hook for writing to or reading from the user’s clipboard. Not to be confused with Microsoft Office’s assistant, Clippy 📎.

This package was interesting to develop for a few reasons:

• Clipboard APIs are old — so old that they have been deprecated and re-invented. We want to make sure that all users, regardless of their browser…