A JSX email component for using a React `Body` component to wrap email content
This package requires an LTS Node version (v18.0.0+) and React v18.2.0+.
Compatible with all modern email services
$ pnpm add @jsx-email/$1
# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/$1
# yarn add @jsx-email/$1We recommend using the @jsx-email/cli for creating new templates.
Create an email template file (e.g. Email.tsx) and import the component:
import { Html } from '@jsx-email/html';
import { Body } from '@jsx-email/body';
import { Column } from '@jsx-email/column';
import { Section } from '@jsx-email/section';
const Email = () => {
return (
<Html lang="en">
<Body style={{ backgroundColor: '#61dafb' }}>
<Section>
<Column style={{ width: '50%' }}>{/* First column */}</Column>
<Column style={{ width: '50%' }}>{/* Second column */}</Column>
</Section>
</Body>
</Html>
);
};This package was built upon prior work for react-email by Bu Kinoshita (@bukinoshita) and Zeno Rocha (@zenorocha).