src/components/CopyOnClick/CopyOnClick.js

   1 import React, { Component } from 'react';
   2 import Clipboard from 'clipboard';
   3 import './CopyOnClick.css';
   4
   5 class CopyOnClick extends Component {
   6   state = {
   7     active: false
   8   }
   9
  10   componentDidMount() {
  11     const { target } = this.props;
  12
  13     this.clipboard = new Clipboard(this.button, {
  14       target: () => document.querySelector(target)
  15     });
  16   }
  17
  18   componentWillUnmount() {
  19     this.clipboard.destroy();
  20   }
  21
  22   showTooltip = () => {
  23     this.setState({ active: true });
  24     setTimeout(this.hideTooltip, 1000);
  25   }
  26
  27   hideTooltip = () => {
  28     this.setState({ active: false });
  29   }
  30
  31   render() {
  32     const { children } = this.props;
  33     let notification = '';
  34
  35     if (this.state.active) {
  36       notification = <span className='CopyOnClick-notification'>Copied!</span>;
  37     }
  38
  39     return (
  40       <div ref={(element) => this.button = element} onClick={this.showTooltip}>
  41         {children}
  42         {notification}
  43       </div>
  44     );
  45   }
  46 }
  47
  48 export default CopyOnClick;