@react-email/link

What is @react-email/link?

@react-email/link is a React component library designed to simplify the creation of email links in React applications. It provides a straightforward way to generate email-friendly links with customizable properties, ensuring compatibility and ease of use.

What are @react-email/link's main functionalities?

Basic Link Creation

This feature allows you to create a basic hyperlink that can be used in an email. The `href` attribute specifies the URL the link points to, and the text between the tags is the clickable text.

<Link href="https://example.com">Click here</Link>

Customizable Link Text

This feature allows you to customize the appearance of the link text using inline styles. In this example, the link text is styled to be blue and without an underline.

<Link href="https://example.com" style={{ color: 'blue', textDecoration: 'none' }}>Visit our site</Link>

Tracking Links

This feature allows you to add custom data attributes to the link for tracking purposes. The `data-tracking-id` attribute can be used to track user interactions with the link.

<Link href="https://example.com" data-tracking-id="12345">Trackable Link</Link>

Other packages similar to @react-email/link

react-router-dom

react-router-dom is a popular package for handling routing in React applications. It provides a `Link` component that is used to create navigational links within a React app. Unlike @react-email/link, it is not specifically designed for email links but for in-app navigation.

react-mailchimp-subscribe

react-mailchimp-subscribe is a package for integrating Mailchimp subscription forms in React applications. It includes components for creating subscription links and forms. While it focuses on email subscriptions, it does not provide the same level of customization for email links as @react-email/link.

README

@react-email/link

A hyperlink to web pages, email addresses, or anything else a URL can address.

Website · GitHub · Discord

Install

Install component from your command line.

With yarn

yarn add @react-email/link -E

With npm

npm install @react-email/link -E

Getting started

Add the component to your email template. Include styles where needed.

import { Link } from "@react-email/link";

const Email = () => {
  return <Link href="https://example.com">Example</Link>;
};

Props

Name	Type	Default	Description
href	string		Link to be triggered when the button is clicked
target	string	_blank	Specify the target attribute for the button link

Support

This component was tested using the most popular email clients.

Gmail ✔	Apple Mail ✔	Outlook ✔	Yahoo! Mail ✔	HEY ✔	Superhuman ✔

License

MIT License