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> );