reactJS copy to clipboard-CodePudding

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">
                      [email protected]
                    </p>
                    <p className="hovertext-p2">copy to clipboard</p>
                  </div>
                  
                  
                </div>
                <div>
                  <SocialMedia />
                </div>
                
              </div>
            </FooterBg>
        </FooterContainer>
    </>
  )
}

export default Footer

CodePudding user response：

A simple

onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}

is going to do the job, you can also try out this npm package.

CodePudding user response：

    const Footer = () => {
let email = "[email protected]";
  return (
    <>
        <FooterContainer>
            <FooterBg>
        
              <div className="footer-wrapper">
                <div className="info">
                  
                  
                  
                  
                  <div className="hovertext-container">
                    <p className="hovertext-p1">
                      [email protected]
                    </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