Enabling clipboard copy in React

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

//XClipboard component
import React from "react";
import CopyToClipboard from 'react-copy-to-clipboard';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import {indigo500} from 'material-ui/styles/colors';
export default class  extends React.Component {
  
  render() {
    // what to display
    const content = this.props.content;
    const noContent = content || this.props.noContent || "";
    
    return  content ? 
      <span>
        <span style={{color:indigo500}}>{content}</span>
        <CopyToClipboard text={content}>
          <IconButton tooltip="copy"><FontIcon className="material-icons">content_copy</FontIcon></IconButton>
        </CopyToClipboard>
      </span> : 
      <span>{noContent}</span>;
    
  }
}

and lets me turn any content into a copiable link, as in the example below

<XClipboard content={url} noContent={"not available"} />

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.

The code for all Ephemeral Exchange material can be found in this consolidated repository.

For more like this, see React, redux, redis, material-UI and firebase. Why not join our forum, follow the blog or follow me on Twitter to ensure you get updates when they are available.