Appearance

Body ​

A JSX email component for using a React `Body` component to wrap email content

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

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

jsx
import { Body, Column, Html, Section } from 'jsx-email';

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>
  );
};
import { Body, Column, Html, Section } from 'jsx-email';

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>
  );
};

Component Props ​

This component has no custom props, but expresses all of the Common Component Props for ComponentProps<'body'>.