Using Mailto in react

Karan S 0
Viewed 24

I am using Mailto to send a mail from react.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Mailto({ email, subject, body, ...props }) {
  return (
    <a href={`mailto:${email}?subject=${subject || ""}&body=${body || ""}`}>
      {props.children}
    </a>
  );
}

ReactDOM.render(
  <Mailto email="sample@gmail.com" subject="Working" body="Hey there !">
    Mail me!
  </Mailto>,
  document.getElementById("root")
);

But this function triggers a draft mail and it is storing in the draft of sender mailbox. I have to go inside the draft box and send the mail for it to go to reciever.

Is that the functionality of Mailto or am i missing something?

mailto reactjs
1 Answers

Refer to the RFC: https://datatracker.ietf.org/doc/html/rfc6068

Specifically, section 3: Semantics and Operations includes this (emphasis mine):

The operation of how any URI scheme is resolved is not mandated by the URI specifications. In current practice, resolving URIs such as those in the 'http' URI scheme causes an immediate interaction between client software and a host running an interactive server. The 'mailto' URI has unusual semantics because resolving such a URI does not cause an immediate interaction with a server. Instead, the client creates a message to the designated address with the various header fields set as default. The user can edit the message, send the message unedited, or choose not to send the message.

Also — you didn't ask about this — but I suggest that you read the specifications for valid encoding. Directly including JS strings in template literals can result in invalid URIs.

jsejcksn0
Related