I wonder if something like this is doable in reactjs (i'm new). In this example, when user hovers over the email address (at the bottom), it says: copy to clipboard, once clicked, email is copied.
https://shapefarm.net/contact/
I have the styling, once hovered, the text appears, but I really don't know how to implement the functionality, any ideas? Thank you!
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