Skip to content

## Body ​

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

## Install ​

Install the component from your command line

pnpmbunnpmyarn
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'>`.