section

@jsx-email/section

A JSX email component which creates section bordaries that can be formatted with columns and rows

@jsx-email/section Documentation

Requirements

This package requires an LTS Node version (v18.0.0+) and React v18.2.0+.

Install

pnpm add @jsx-email/section

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/section
# yarn add @jsx-email/section

Usage

We recommend using the @jsx-email/cli for creating new templates.

Create an email template file (e.g. Email.tsx) and import the component:

import { Section } from '@jsx-email/section';
import { Column } from '@jsx-email/column';
import { Row } from '@jsx-email/row';
import { Text } from '@jsx-email/text';

const Email = () => {
  return (
    {/* A simple `section` */}
    <Section>
      <Text>Hello World</Text>
    </Section>

    {/* Formatted with `rows` and `columns` */}
     <Section>
      <Row>
        <Column>Column 1, Row 1</Column>
        <Column>Column 2, Row 1</Column>
      </Row>
      <Row>
        <Column>Column 1, Row 2</Column>
        <Column>Column 2, Row 2</Column>
      </Row>
    </Section>
  );
};

Please see the @jsx-email/section Documentation for props and additional usage information.

Attribution 🧡

This package was built upon prior work for react-email by Bu Kinoshita (@bukinoshita) and Zeno Rocha (@zenorocha).

License

MIT License