Me pregunto si algo como esto es factible en reactjs (soy nuevo). En este ejemplo, cuando el usuario se desplaza sobre la dirección de correo electrónico (en la parte inferior), dice: copiar al portapapeles, una vez que se hace clic, se copia el correo electrónico.
https://shapefarm.net/contacto/
Tengo el estilo, una vez que se desplaza, aparece el texto, pero realmente no sé cómo implementar la funcionalidad, ¿alguna idea? ¡Gracias!
const Footer = () => { return ( <> <FooterContainer> <FooterBg> <div className="footer-wrapper"> <div className="info"> <div className="hovertext-container"> <p className="hovertext-p1"> mymail@test.com </p> <p className="hovertext-p2">copy to clipboard</p> </div> </div> <div> <SocialMedia /> </div> </div> </FooterBg> </FooterContainer> </> ) } export default Footer const Footer = () => { let email = "mymail@test.com"; return ( <> <FooterContainer> <FooterBg> <div className="footer-wrapper"> <div className="info"> <div className="hovertext-container"> <p className="hovertext-p1"> mymail@test.com </p> <p onClick={async () => { await navigator.clipboard.writeText(email) alert("Copied text!") }} className="hovertext-p2">copy to clipboard</p> </div> </div> <div> <SocialMedia /> </div> </div> </FooterBg> </FooterContainer> </> ) } export default Footer