Crea un componente React reutilizable para copiar al portapapeles

En el desarrollo de aplicaciones web, es común la necesidad de permitir a los usuarios copiar información de manera rápida y sencilla. Un componente de React que facilite esta funcionalidad puede mejorar la experiencia del usuario significativamente. En este artículo, aprenderemos a crear un componente reutilizable que permitirá a los usuarios copiar texto al portapapeles de forma eficiente.

¿Qué es un componente reutilizable en React?

Los componentes reutilizables son bloques de código que pueden ser utilizados en diferentes partes de una aplicación sin necesidad de reescribir el mismo código. Al crear componentes reutilizables, los desarrolladores pueden ahorrar tiempo y aumentar la mantenibilidad del código. En el caso de copiar al portapapeles, construiremos un componente que se pueda integrar en cualquier parte de nuestra aplicación React.

Creación del componente

Para iniciar, se debe crear un nuevo componente llamado CopyToClipboard en el proyecto de React. Este componente estará compuesto por un botón que, al ser presionado, copiará el texto proporcionado al portapapeles del usuario.

Importación de dependencias

Comienza importando React y el hook useState junto con el paquete react-copy-to-clipboard. Este último facilitará el proceso de copia.

import React, { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

Definición del componente

A continuación, define el componente CopyToClipboard. Este recibirá dos props: textToCopy, que es el texto que se desea copiar, y children, que permite personalizar el contenido que se mostrará en el botón.

const CopyToClipboardComponent = ({ textToCopy, children }) => {
    const [copied, setCopied] = useState(false);

    return (
        <CopyToClipboard text={textToCopy} onCopy={() => setCopied(true)}>
            <button>{children}</button>
        </CopyToClipboard>
    );
};

Manejo del estado

En el ejemplo anterior, se utiliza useState para manejar el estado del texto copiado. Cada vez que el usuario copia el texto, el estado se actualiza a true. Esto puede utilizarse para mostrar una notificación al usuario que confirme que el texto ha sido copiado.

Personalización del componente

Para permitir a los desarrolladores utilizar este componente de diferentes maneras, se recomienda agregar un mensaje que se muestre durante un breve período después de la copia. Esto puede realizarse utilizando un setTimeout para que el estado vuelva a false después de unos segundos.

const CopyToClipboardComponent = ({ textToCopy, children }) => {
    const [copied, setCopied] = useState(false);

    const handleCopy = () => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <CopyToClipboard text={textToCopy} onCopy={handleCopy}>
            <div>
                <button>{children}</button>
                {copied && <span>¡Copiado!</span>}
            </div>
        </CopyToClipboard>
    );
};

Uso del componente

Para utilizar el nuevo componente en una aplicación React, simplemente importa el CopyToClipboardComponent y coloca el texto que deseas copiar como un prop.

<CopyToClipboardComponent textToCopy="Texto a copiar">
    Copiar texto
</CopyToClipboardComponent>

Conclusión

Crear un componente React reutilizable para copiar al portapapeles es una tarea sencilla y valiosa que puede aumentar la funcionalidad de cualquier aplicación. Al seguir estos pasos, los desarrolladores pueden proporcionar a los usuarios una forma efectiva y rápida de copiar texto.

Te invito a que sigas explorando más temas interesantes en mi blog, donde encontrarás artículos sobre desarrollo web y tecnología. ¡Hasta la próxima!