How to share current URL in ReactJS

Question

I want to give the user the ability to click a button that will copy the current URL to the clipboard. Since I use react-router all I need is extract the this.props.history.location.pathname and append it to my domain name.

The second part would be to save this to the clipboard. How can this be done? Also, is the solution limited to some browsers?

Answer 1

react-copy-to-clipboard, offers copying a text to the clipboard.

Here's a working demo of the library: http://nkbt.github.io/react-copy-to-clipboard/

Here's a basic example, using the library:

import { CopyToClipboard } from 'react-copy-to-clipboard'

render() {
  // Or if you prefer, you can use react-router API
  const url = window.location.href

  <CopyToClipboard text={url}>
    <button>Copy URL to the clipboard</button>
  </CopyToClipboard>
}

Answer 2

If you don't want to use libraries, you can do it manually quite easily:

You need an input element for to do this. The element needs to hold the value you want to copy. Then, to trigger a copy, you need to highlight the text and do document.execCommand("copy"). This will store the input value to the user's clipboard.

If you don't want the input element to be visible, you can give it position: absolute along with some top and left values and send it to no-mans-land, like I did below:

class MyApp extends React.Component {
  constructor() {
    super();
    this.copy = this.copy.bind(this);
  }

  copy() {
    this.elRef.select();
    document.execCommand("copy");
  }

  render() {
    return (
      <div>
        <input id="url-input" ref={el => this.elRef = el} value={this.props.url} />
        <button onClick={this.copy}>Copy</button>
      </div>
    )
  }
}

ReactDOM.render(<MyApp url="http://google.com" />, document.getElementById("app"));

#url-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

---

Alternatively, you can create a temporary DOM-node with javascript, append it to the body and then remove it once the copying is done.

class MyApp extends React.Component {
  constructor() {
    super();
    this.copy = this.copy.bind(this);
  }

  copy() {
    const el = document.createElement('input');
    el.value = this.props.url;
    el.id = "url-input";
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    el.remove();
  }

  render() {
    return <button onClick={this.copy}>Copy</button>
  }
}

ReactDOM.render(<MyApp url="http://google.com" />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>