Working with the clipboard in a webapp is more complicated than it needs to be due to differences in browsers and security concerns about copied content being retrievable by multiple users of the same browser. For my Ephemeral Exchange console app, I wanted to enable copying links from the tutorial section. Luckily, I'm using React - and there's nice React component for doing that.
I wanted to add this retrospectively to many pages, but because every is built with reusable components it was a breeze to do. First step was to create a wrapper component for react-copy-to-clipboard that would treat all presentation in the same way.
This takes a content property, displays an colorizes it, adds an icon and a tooltip
and lets me turn any content into a copiable link, as in the example below
I use it like this
Luckily, all the places I wanted to add this were already themselves contained in components too, so I only had to make one change in that component and all pages were updated.
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > React, redux, redis, material-UI and firebase >