[RFC] Addons #1044

pontusab · 2023-11-21T15:38:03Z

pontusab
Nov 21, 2023

Goals

Extend react-email with plugins (i18n helpers)
Extend react-email preview with controllers for example i18n selector to choose language

Background

Im currently implementing i18n within each email, I would like a config where I can define languages and translations where can toggle between them within the preview tool.

Proposal

Config

Welcome.config.ts|tsx

import { withI18n, withConfig } from '@react-email/addons';
import { Welcome } from './Welcome';


const defaultProps = {
    firstName: 'Pontus'
}

export default withConfig(withI18n(Welcome), defaultProps)

Translations

In emails/welcome add translations.ts

export default {
    en: {
        welcome: 'Welcome {firstName}!,
        button: 'Click me',
    },
    sv: {
        welcome: 'Välkommen {firstName}!',
        button: 'Klicka på mig'
    }
}

Template

Welcome.tsx

import { Html, Button, Heading } from "@react-email/components";
import { I18nProps } from '@react-email/addons';

type Props & I18nProps = {
    firstName: string
}

const Email = ({ t, locale, firstName }) => {
  return (
    <Html lang={locale} dir="ltr">
    <Heading as="h2">{t('welcome', { firstName })}</Heading>

      <Button href="https://example.com" style={{ color: "#61dafb" }}>
        {t('button)}
      </Button>
    </Html>
  );
};

zenorocha · 2023-11-24T00:36:58Z

zenorocha
Nov 24, 2023
Maintainer

That's super promising. Is there a good reference you could point to for this?

0 replies

pontusab · 2023-11-26T10:27:45Z

pontusab
Nov 26, 2023
Author

We would then need to require the Welcome.config.ts file instead of the template to get the hoc in runtime. One other way would be to introduce a global config like email.config.ts and rethink how the template is included

1 reply

pontusab Nov 26, 2023
Author

Storybook is a good example: https://storybook.js.org/docs/react/addons/writing-addons

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[RFC] Addons #1044

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[RFC] Addons #1044

Uh oh!

Uh oh!

pontusab Nov 21, 2023

Goals

Background

Proposal

Config

Translations

Template

Replies: 2 comments · 1 reply

Uh oh!

zenorocha Nov 24, 2023 Maintainer

Uh oh!

pontusab Nov 26, 2023 Author

Uh oh!

pontusab Nov 26, 2023 Author

pontusab
Nov 21, 2023

Replies: 2 comments 1 reply

zenorocha
Nov 24, 2023
Maintainer

pontusab
Nov 26, 2023
Author

pontusab Nov 26, 2023
Author