Email link
React, Components · Nov 16, 2020

Renders a link formatted to send an email (mailto:
link).
- Use the
email
,subject
andbody
props to create a<a>
element with an appropriatehref
attribute. - Use
encodeURIcomponent
to safely encode thesubject
andbody
into the link URL. - Render the link with
children
as its content.
const Mailto = ({ email, subject = '', body = '', children }) => {
let params = subject || body ? '?' : '';
if (subject) params += `subject=${encodeURIComponent(subject)}`;
if (body) params += `${subject ? '&' : ''}body=${encodeURIComponent(body)}`;
return <a href={`mailto:${email}${params}`}>{children}</a>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
Mail me!
</Mailto>
);
Written by Angelos Chalaris
I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.
If you want to keep in touch, follow me on GitHub.