Column ​

A JSX email component which displays columns that separate content bounaries vertically

Install ​

Install the component from your command line

pnpm add jsx-email

pnpm add jsx-email

bun add jsx-email

bun add jsx-email

npm add jsx-email

npm add jsx-email

yarn add jsx-email

yarn add jsx-email

Usage ​

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

import { Column, Row } from 'jsx-email';

const Email = () => {
  return (
    <Row>
      <Column>A</Column>
      <Column>B</Column>
      <Column>C</Column>
    </Row>
  );
};

import { Column, Row } from 'jsx-email';

const Email = () => {
  return (
    <Row>
      <Column>A</Column>
      <Column>B</Column>
      <Column>C</Column>
    </Row>
  );
};

Component Props ​

export interface ColumnProps extends BaseProps<'td'> {
  bgColor?: string;
  bgImage?: string;
}

export interface ColumnProps extends BaseProps<'td'> {
  bgColor?: string;
  bgImage?: string;
}

bgColor: string;

bgColor: string;

Used to set the background color in HTML email by wrapping the bgcolor property of <td> elements

bgImage: string;

bgImage: string;

Used to set background images in HTML email by wrapping the background property of <td> elements