reactJS copy to clipboard

Question

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

you can find your answer in the following question, good luck https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Farid Ghaderi, May 29 '22 at 21:48

score 0 · Answer 1 · answered May 29 '22 at 21:45

0

A simple

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

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

answered May 29 '22 at 21:45

Piotr Ostrowski

520
5
8

score 0 · Answer 2 · answered May 29 '22 at 21:47

    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

reactJS copy to clipboard

2 Answers2