Implementar la función de copiar al portapapeles en React

1. Copiar al portapapeles en React usando el método e.clipboardData.setData()
2. Copiar al portapapeles en React usando navigator.clipboard.writeText()
3. Copiar al portapapeles usando el paquete react-copy-to-clipboard

Copiar y pegar son funciones universalmente populares que se utilizan en todo tipo de dispositivos y sistemas operativos.

Al desarrollar una aplicación, a veces puede predecir que será necesario copiar un valor específico, por ejemplo, un fragmento de texto. En estas situaciones, puede implementar un botón que lo copie automáticamente. Esto es útil porque las personas que usan teléfonos a veces pueden tener dificultades con la selección de texto.

ReactJS está optimizado para permitir el desarrollo de aplicaciones fáciles de usar. El marco facilita la implementación de un botón (o enlace) en el que se puede hacer clic que copia un fragmento de texto.

Copiar al portapapeles en React usando el método e.clipboardData.setData()

Este método proporciona una manera fácil de escuchar eventos y copiar un texto una vez que ocurren. Su administrador deberá recibir una referencia al evento del navegador.

En React, será una instancia de SyntheticEvent, al que se hace referencia simplemente como e. Veamos un ejemplo simple:

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    const handleCopy = (e) => {
      e.preventDefault()
      e.clipboardData.setData("Text", this.state.text)
    } 
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={(e) => handleCopy(e)}>Copy Text</button>
      </div>)
  }
}

En este ejemplo, tenemos un valor de texto almacenado en la propiedad de estado text. Luego, una vez que se hace clic en el botón, ejecutamos el controlador, que usa el método e.clipboardData.setData() para empujar el texto al portapapeles.

El método toma dos argumentos: el tipo de valor copiado y el valor en sí.

Según caniuse.com, el 95% de las personas que navegan por Internet en todo el mundo utilizan el navegador que admite esta función. Por lo que es seguro de usar.

Copiar al portapapeles en React usando navigator.clipboard.writeText()

La interfaz Navigator es una API más moderna. Tiene casi el mismo soporte (92%) para usuarios de todo el mundo. Es compatible con componentes funcionales y de clase.

Veamos un ejemplo:

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
      </div>)
  }
}

Como puede ver, esta es una solución más simple que requiere menos líneas de código. No requiere que importe ningún valor o instale paquetes externos.

Solo por esta razón, para mí, la interfaz Navigator es la mejor manera de copiar texto en un portapapeles. Puedes probarlo tú mismo en playcode.

Antes de utilizar la interfaz Navigator, debe recordar que las versiones anteriores de Internet Explorer no la admiten. Además, en Chrome, parece que la interfaz Navigator solo funciona mientras la página esté marcada como segura (HTTPS o localhost).

Además de estos dos puntos, no hay inconvenientes en utilizar este método.

Copiar al portapapeles usando el paquete react-copy-to-clipboard

Si no está en contra de instalar un paquete externo, react-copy-to-clipboard es probablemente su mejor solución. Para obtener información detallada sobre las diferentes funciones, eche un vistazo a su página oficial de npm.

Una vez instalado, obtendrá acceso al componente personalizado <CopyToClipboard>. Puede utilizar su atributo text para proporcionar un valor que debe copiarse. Luego puede agregar un componente simple <button>, que actuará como un disparador para copiar el valor del texto en el portapapeles.