How to give a mail to link in html reactjs
In ReactJS, you can use the mailto
link to create a link that opens the user's default email client with a pre-filled email address and subject. Here's an example:
import React from 'react';
const MailLink = () => {
const email = '[email protected]';
const subject = 'Hello from ReactJS!';
return (
<a href={`mailto:${email}?subject=${subject}`}>
Send Email
</a>
);
};
export default MailLink;
In this example, we define a MailLink
component that takes an email
and subject
prop. We then use the href
attribute to create a mailto
link that opens the user's default email client with the pre-filled email address and subject.
When the user clicks the link, their default email client will open with the pre-filled email address and subject. For example, if the user clicks the link, their email client might look like this:
To: [email protected]
Subject: Hello from ReactJS!
Note that you can also add additional parameters to the mailto
link, such as body
for the email body or cc
for the carbon copy. For example:
<a href={`mailto:${email}?subject=${subject}&body=Hello+from+ReactJS!`}>
Send Email
</a>
This would pre-fill the email body with the text "Hello from ReactJS!".
Also, you can use a library like react-mailto
which provides a more convenient way to create mailto links in React.
import Mailto from 'react-mailto';
const MailLink = () => {
const email = '[email protected]';
const subject = 'Hello from ReactJS!';
return (
<Mailto
email={email}
subject={subject}
body="Hello from ReactJS!"
>
Send Email
</Mailto>
);
};
This library provides a more declarative way to create mailto links, and also supports additional features like handling errors and providing a fallback link.