CODEWITHSUNDEEP
reactjsreact-reduxreact-routerredux-formmailto
K.SINGH
K.SINGH

Reputation: 111

How to launch and open email client ReactJS

I want to show a pop-up like this click here in my react application. In simple words, I want to launch and open the email client in ReactJs. I am currently using a simple p tag:

 <p className="cnct_email_addr">Email US</p>

I know there is a way to use mailto like this:

<a href="mailto:[email protected]">Email Us</a>

But I want to know if there is a more reactish-way of doing it. If there is one please let me know.

Upvotes: 11

Views: 31121

Answers (4)

balaji
balaji

Reputation: 1

const openEmail = () => {
  const recipient = "[email protected]";
  const subject = encodeURIComponent("Subject Here");
  const body = encodeURIComponent("Please fill the following detail:\n\n1. Detail 1\n2. Detail 2\n3. Detail 3");

  // Check if default email client exists (mailto)
  try {
    window.location.href = `mailto:${recipient}?subject=${subject}&body=${body}`;
  } catch (e) {
    // Fallback to Outlook Web App
    window.open(
      `https://outlook.office.com/mail/deeplink/compose?to=${recipient}&subject=${subject}&body=${body}`,
      '_blank'
    );
  }
};

Upvotes: 0

Hatem
Hatem

Reputation: 323

You can open the mailto link using window

window.open('mailto:[email protected]?subject=Subject&body=Body%20goes%20here')

Upvotes: 21

paridhi pathak
paridhi pathak

Reputation: 51

const Mailto = ({ email, subject, body, children }) => {
  return (
    <a href={`mailto:${email}?subject=${encodeURIComponent(subject) || ''}&body=${encodeURIComponent(body) || ''}`}>{children}</a>
  );
};

ReactDOM.render(
  <Mailto email="[email protected]" subject="Hello & Welcome" body="Hello world!">
    Mail me!
  </Mailto>,
  document.getElementById('root')
);

Reference link.

Upvotes: 5

Roni Antonio
Roni Antonio

Reputation: 1460

You must import this 'Linking'

<Button onPress={() => Linking.openURL('mailto:[email protected]?subject=SendMail&body=Description') }
              title="[email protected]" />

Upvotes: -3

Related Questions