andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet descriptions

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-11-16 15:17:26 +02:00
parent eeccde742b
commit 1c622b64d7
3 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippets/Mailto.md
View File

@ -3,16 +3,19 @@ title: Mailto
tags: components,beginner
---
Renders a link formatted to send an email.
Renders a link formatted to send an email (`mailto:` link).
- Destructure the component's props, use `email`, `subject` and `body` to create a `<a>` element with an appropriate `href` attribute.
- Use the `email`, `subject` and `body` props to create a `<a>` element with an appropriate `href` attribute.
- Use `encodeURIcomponent` to safely encode the `subject` and `body` into the link URL.
- Render the link with `children` as its content.
```jsx
const Mailto = ({ email, subject, body, children }) => {
return (
<a href={`mailto:${email}?subject=${encodeURIComponent(subject) || ''}&body=${encodeURIComponent(body) || ''}`}>{children}</a>
);
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>;
};
```