I have a section on my website with a contact information. I want to ensure that when users click on the email address, it gets copied to their clipboards automatically.
Here is the code snippet:
return (
<InfoContainer lightBg={lightBg} id={id}>
<InfoWrapper>
<InfoRow imgStart={imgStart}>
<Column1>
<TextWrapper>
<TopLine>{topLine}</TopLine>
<Subtitle darkText={darkText}>{headLine}</Subtitle>
<Heading lightText={lightText}>{description}</Heading>
<Subtitle darkText={darkText}>{headLine2}</Subtitle>
</TextWrapper>
</Column1>
<Column2>
<ImgWrap>
<Img src={img} alt={alt} />
</ImgWrap>
</Column2>
</InfoRow>
</InfoWrapper>
</InfoContainer>
)
}
This component is designed for reusability, hence I have implemented features like lightText and darkText in a separate file for easy reuse.
The data is passed from a data.js file which contains the following:
export const homeObjThree = {
id: 'experience',
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: 'Contact Me',
headLine: 'you can reach out to me at:' ,
description:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462223302728212b332d2e23342c232306212b272f2a6825292b">[email protected]</a>',
headLine2: 'Or simply just drop by a hello :)',
imgStart: false,
img: experience,
alt: 'alt line does not always have to boring',
dark: true,
primary: true,
darkText: true,
};
The email address is passed as the description, which is the only part I want to be copied.
The styled component Heading is defined as follows:
export const Heading = styled.h1`
color: #fff;
margin-bottom: 24px;
font-size: 30px;
line-height: 1.1 ;
font-weight: 600;
color: ${({ lightText }) => (lightText ? '#f7f8fa' : '#010606')};
@media screen and (max-width: 480px) {
font-size: 18px;
}
`;
To make the email address look like a link, you can underline it when users hover over the text. Additionally, clicking on the text should copy it to the clipboard with a confirmation message. You may refer to resources like this link for guidance.
However, if you encounter issues such as the one mentioned for the onCopy() function, where the error 'state is not defined no-undef' occurs, you need to properly define state within the component. Here is an example:
const InfoSection = ({
lightBg,
imgStart,
topLine,
lightText,
headLine,
description,
headLine2,
img,
alt,
id,
darkText,
}) => {
this.state = {
value: '',
copied: false,
};
return (
<InfoContainer lightBg={lightBg} id={id}>
<InfoWrapper>
<InfoRow imgStart={imgStart}>
<Column1>
<TextWrapper>
<TopLine>{topLine}</TopLine>
<Subtitle darkText={darkText}>{headLine}</Subtitle>
<CopyToClipboard text={description} onCopy={() => this.setState({copied: true})}>
<Heading lightText={lightText}>{description}</Heading>
</CopyToClipboard>
{this.state.copied ? <span style={{color: '#01BF71'}}>Copied.</span> : null}
<Subtitle darkText={darkText}>{headLine2}</Subtitle>
</TextWrapper>
</Column1>
<Column2>
<ImgWrap>
<Img src={img} alt={alt} />
</ImgWrap>
</Column2>
</InfoRow>
</InfoWrapper>
</InfoContainer>
)
}