resend / react-email Goto Github PK

View Code? Open in Web Editor NEW

12.4K 12.4K 558.0 59.67 MB

💌 Build and send emails using React

Home Page: https://react.email

License: MIT License

JavaScript 1.15% TypeScript 92.39% CSS 0.05% MDX 6.42%

react-email's People

Contributors

Stargazers

Watchers

Forkers

pepeladeira hyvip-ai guscsales marcelof5 rychillie petersonmedina knoxnoe irangarcia abnersajr filipemelo2002 handotdev cassiorsfreitas izuutech ribeiroevandro helderberto lucianodiisouza oyelowo 0xforked iagocavalcante papadavis47 lyrictian sharozraees802 caekinc sandeepsuvit therakeshpurohit spread0x suryatmodulus mdeora takanome-dev joonmo-you felipsbreno iuzn mohsenali4343 anthonybyansi olajvde jayoram emersongarrido niicojs abhinandanwadwa luisgurmendez artidataio melroy-bsk rafaelmotta kka8900 dauletbaev eswaramoorthykarthikeyan c0dr r3nanp hahnbeelee matifandy8 chaance enkhee-osiris bruno88cabral farxa ivaneliasoo rickyzhangca rafaelfpviana alecharmon matheus0liveira mindkhichdi zer0cache akagire relferreira styluxlive ckrit-platform delafin camillegachido leonardorpr aku1raa rizwanzaheer bogordesaincom bastiaanv jacobjohansen arismrd7 sayantan-s binarysenseiii creativoma skylightxo marat-kh betula-bookmarks nikhea teofanis amar-jay singhbawan ggeorgaras tumelo-mapheto giftbanda rickyc0626-forks saurabhnemade tomas6elby andreaskintaken iuriimattos2 pondorasti horyntal ynamarlin imbaedin loopezsaloo m-shaka adelrodriguez ramsybolter

react-email's Issues

Create `Divider` component

A thin horizontal line that separates content areas built on top of <hr>.

Eg:

import { Html } from '@react-email/html';
import { Divider } from '@react-email/divider';

const Email = () => {
  return (
    <Html lang="en">
      <Divider />
    </Html>
  );
};

Recreate Stripe's welcome email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a welcome email.

Original: welcome-to-stripe.eml.zip

Add option to download final HTML

This could be an icon next to the copy to clipboard icon.

Recreate Apple's receipt email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a receipt email.

Original: Your receipt from Apple.eml.zip

Create `Html` component

An Html component to wrap the email content.

Eg:

import { Button } from '@react-email/button';
import { Html } from '@react-email/html';

const Email = () => {
  return (
    <Html lang="en">
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Html>
  );
};

Recreate Airbnb's review email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a review email.

Original: Read Alex’s review.eml.zip

Add option to inline CSS styles on render

Use juice to inline styles.

import { MyTemplate } from '../components/MyTemplate';
import { render } from '@react-email/render';

const options = {
  inline: true
};

const html = render(<MyTemplate firstName="Jim" />, options);

Include `render` package

Be able to render React components and append a DOCTYPE needed for email.

Add live reload to preview

Nowadays, you have to reload every time you make a change. I'm not sure if that's because of the iframe or something else.

Create `Img` component

Display a responsive image in your email.

Eg:

import { Html } from '@react-email/html';
import { Img } from '@react-email/img';

const Email = () => {
  return (
    <Html>
      <Img src="cat.jpg" alt="Cat" width="300" />
    </Html>
  );
};

Build a "create-react-email" tool

Think of it as create-react-app but for email.

Similar:

https://github.com/vercel/turborepo/tree/main/packages/create-turbo

Add option to prettify code on render

Use js-beautify as a dependency.

import { MyTemplate } from '../components/MyTemplate';
import { render } from '@react-email/render';

const options = {
  prettify: true
};

const html = render(<MyTemplate firstName="Jim" />, options);

Recreate Dropbox's reset password email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a reset password email.

Original: Reset your Dropbox password.eml.zip

Rename `A` component to `Link`

Same as #98

Create live preview mode

The idea is to have a solution for local development, so you don't need to send real emails while testing things out.

Add tests using Jest on a component level

Fix button line height

Prototype components with closed style API

Recreate Slack's confirmation email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a confirmation code email.

Original: Slack confirmation code_ DJZ-TLX.eml.zip

Create `Ol` component

Defines an ordered list using a decimal style by default.

import { Html } from '@react-email/html';
import { Ol } from '@react-email/ol';

const Email = () => {
  return (
    <Html lang="en">
      <Ol>
        <li>foo</li>
        <li>bar</li>
      </Ol>
    </Html>
  );
};

Create `Code` component

This is used for defining an inline sample of code.

import { Html } from '@react-email/html';
import { Code } from '@react-email/code';

const Email = () => {
  return (
    <Html lang="en">
      <Code>foo</Code>
    </Html>
  );
};

Add ability to see final HTML from live preview

We can have a button to copy code to clipboard and also download it locally.

Add keyboard shortcuts for every preview option

Inspiration: Superhuman

Create `Ul` component

Defines an unordered list using a bullet style by default.

import { Html } from '@react-email/html';
import { Ul } from '@react-email/ul';

const Email = () => {
  return (
    <Html lang="en">
      <Ul>
        <li>foo</li>
        <li>bar</li>
      </Ul>
    </Html>
  );
};

Create util to handle padding

Whenever the user passes a style prop with padding, we should have an util to handle the padding by adding the msoPaddingAlt attribute as well.

const padding = (style: React.CSSProperties) => {
// Check if there's any padding
return { ...style, msoPaddingAlt: style.padding }
}

Add tooltip for every preview option

Animation Inspiration: Family

Create `P` component

import { Html } from '@react-email/html';
import { P } from '@react-email/p';

const Email = () => {
  return (
    <Html lang="en">
      <P>Lorem ipsum</P>
    </Html>
  );
};

Create `Heading` component

Not much you need to do here, mostly a wrapper around <h1>, <h2>, etc.

Eg:

import { Html } from '@react-email/html';
import { Heading } from '@react-email/heading';

const Email = () => {
  return (
    <Html lang="en">
      <Heading size="1">Lorem</Heading>
      <Heading size="2">Ipsum</Heading>
      <Heading size="3">Dolor</Heading>
      <Heading size="4">Sit</Heading>
      <Heading size="5">Amet</Heading>
      <Heading size="6">Consectetur</Heading>
    </Html>
  );
};

Create `Head` component

A Head component that contains all related <head /> content.

Rename `P` component to `Text`

When trying to find the component, it's way harder to find the right P since the letter may come from a text instead of the component.

Eg:

// cmd + f to find all `P` components to replace, the search will return the `P`s from `Ponei` and `Piano` as well.

<div>
  <P>Ponei</P>
  <P>Piano</P>
</div>

Document how to migrate from MJML to React Email

Build VSCode extension for live preview

Inspiration:

https://twitter.com/chriscoyier/status/1572644485628305409

Reference:

Add support for MDX

Inspiration:

Components needed:

Deploy preview app to Vercel

Domain: demo.react.email

Create `Pre` component

This is used to preserve spaces, line breaks and tabs in the text. So how you format the code in the HTML file is how it will look on the screen.

import { Html } from '@react-email/html';
import { Pre } from '@react-email/pre';

const Email = () => {
  return (
    <Html lang="en">
      <Pre>foo          bar</Pre>
    </Html>
  );
};

Recreate Twitch's password email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a password change email.

Original: Your Twitch Account - Password Change.eml.zip

Fix Vercel's Invite User template inconsistencies

Gmail App (iOS 14.2)

Padding

Apple Mail 13 (macOS 10.15)

Padding
Code

OL Office 365 (Win 10)

Padding
Code
Button

Create `Preview` component

A text snippet that appears under the subject line in the inbox but is hidden from the main email content when it’s opened.

Eg:

import { Html } from '@react-email/html';
import { Preheader } from '@react-email/preheader';

const Email = () => {
  return (
    <Html lang="en">
      <Preheader text="Lorem ipsum" />
    </Html>
  );
};

Add support for web fonts

References:

Create Outlook component

A component for internal usage to be used to replace the usage of the not so sexy syntax for outlook

Allow users to see raw preview in a new tab

Add ability to send a real email from live preview

Fix Heading style props override

The style props doesn't override the default styles.

Add `prettier`

Recreate Nike's order email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of an order confirmation email.

Original: Looking for Your Nike Order.eml.zip

Change Avatar interface to be a single component

We currently have the following API for our Avatar component:

<Avatar>
      <AvatarImage src="cat.jpg" />
      <AvatarFallback>My Cat</AvatarFallback>
</Avatar>

I believe we could follow the pattern used by Chakra's Avatar and have everything in one tag instead:

<Avatar name="Dan Abrahmov" src="https://bit.ly/dan-abramov" />

What do you think @petersonmedina @bukinoshita?

Recreate Notion's magic link email

It's important that we try to recreate real emails in order to validate the quality and developer experience of our components. This is an example of a magic link email.

Original: Your temporary Notion login.eml.zip

Create `Container` component

Something to give the content a max-width and center it in the email body. Maybe include props for max-width values and alignment?

import { Button } from '@react-email/button';
import { Html } from '@react-email/html';
import { Container } from '@react-email/container';

const Email = () => {
  return (
    <Html lang="en">
      <Container maxWidth="400" align="center" style={{ backgroundColor: '#fff' }}>
        <Button href="https://example.com" style={{ color: '#61dafb' }}>
          Click me
        </Button>
      </Container>
    </Html>
  );
};

Create `A` component

import { Html } from '@react-email/html';
import { A } from '@react-email/a';

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