Usage with React (just an example)

Description

First of all, thanks and congrats for clipboard.js, it is a big enhancement for every web developer.

I am using clipboard.js with React and it works. I would like to add style from material-ui.

At first I was using the data-clipboard-target attribute, then I noticed the last part of documentation that explaing how to set target dynamically.

So I solved my issue while I was opening it, just reading the docs. I just want to report my working example, to give back to the community.

Minimal example

import React from 'react'

class ResultURL extends React.Component {
  componentDidMount () {
    const {
      buttonId,
      inputId
    } = this.props

    const buttonIdSelector = `#${buttonId}`

    const Clipboard = this.props.clipboard

    this.clipboard = new Clipboard(
      buttonIdSelector, {
        target: () => document.getElementById(inputId)
      }
    )
  }

  render () {
    const {
      buttonId,
      inputId,
      value
    } = this.props

    const inputIdSelector = `#${inputId}`

    return (
      <div>
        <input
          id={inputId}
          type={'text'}
          value={value}
          readOnly
        />
        <button
          id={buttonId}
        > Copy
        </button>
      </div>
    )
  }
}

ResultURL.propTypes = {
  clipboard: React.PropTypes.func.isRequired,
  value: React.PropTypes.string,
  inputId: React.PropTypes.string.isRequired,
  buttonId: React.PropTypes.string.isRequired
}

export default ResultURL

[zenorocha]

Done: https://github.com/zenorocha/clipboard.js/wiki/Guides 😉

Thanks @fibo for sharing your experience!

[fibo]

@Clee681 Yes it makes more sense, codepen updated, 10x