MailtoLink
minimal usage
Any Paragon component or export may be added to the code example.
<MailtoLink to="edx@example.com">edx@example.com</MailtoLink>
with blank target
Any Paragon component or export may be added to the code example.
<MailtoLink to="edx@example.com" target="_blank">edx@example.com</MailtoLink>
with onClick
Any Paragon component or export may be added to the code example.
<MailtoLinkto="edx@example.com"target="_blank"onClick={() => { /* some actions */ }}>edx@example.com</MailtoLink>
with subject and body
Any Paragon component or export may be added to the code example.
<MailtoLinkto="edx@example.com"subject="Check out this mailto component!"body="This mailto component is awesome!">email with subject and body</MailtoLink>
with cc and bcc
Any Paragon component or export may be added to the code example.
<MailtoLinkcc="edx@example.com"bcc="edx@example.com">More mail, this time with cc and bcc</MailtoLink>
with multiple cc and bcc
Any Paragon component or export may be added to the code example.
<MailtoLinkcc={['foo@example.com', 'bar@example.com', 'baz@example.com']}bcc={['foo@example.com', 'bar@example.com', 'baz@example.com']}>edx@example.com</MailtoLink>
Props API#
- children
nodeRequiredContent of the
MailToLink - className
stringCustom class names for the
MailToLink - to
emailPropType[]|emailPropTypeDefault[]Specifies the email's recipients
- cc
emailPropType[]|emailPropTypeDefault[]Specifies the email's carbon copy recipients
- bcc
emailPropType[]|emailPropTypeDefault[]Specifies the email's blind carbon copy recipients
- subject
stringDefault''Specifies the email's subject
- body
stringDefault''Specifies the email's body
- target
stringDefault'_self'Specifies where the link should open. The default behavior is
_self, which means that the URL will be loaded into the same browsing context as the current one - onClick
funcDefaultnullSpecifies the callback function when the link is clicked
- externalLink
shape{alternativeText:isRequiredIf(PropTypes.string, props => props.target === '_blank'),title:}isRequiredIf(PropTypes.string, props => props.target === '_blank'),Default{ alternativeText: MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, title: MAIL_TO_LINK_EXTERNAL_LINK_TITLE, }The object that contains the
alternativeTextandtitlefields which specify the text and title for links with a_blanktarget (which loads the URL in a new browsing context).
Usage Insights#
MailtoLink
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 20.26.3 | 3 | |
| frontend-app-course-authoring | 20.32.0 | 3 | |
| frontend-app-learner-dashboard | 20.32.0 | 3 | |
| frontend-app-learner-portal-enterprise | 20.36.0 | 7 | |
| frontend-lib-special-exams | 20.22.4 | 8 |