Skip to main content

​
1. Install dependencies

Install the EmailUX Email package locally and a few components. 
# pnpm
pnpm add @emailux/components

# npm
npm install @emailux/components

# yarn
yarn add @emailux/components

​
2. Usage

import { Body } from "@emailux/components";

export default function EmailTemplate() {
  return <Body>
    <title>Some title</title>
  </Body>;
}

​
Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYes—Content of the email document
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction
backgroundstringYes——
backgroundColorstringYes——
styleReact.CSSPropertiesNo--
widthnumber or “100%“No—width of container
paddingstringNo12px 20pxinner padding
outerBgColorstringNo—When whidth is not 100% and a number, you can set this value as Hex color value to set the left and right side of the section background color, not the inside
borderRadiusstringNo
footerReact.ReactNodeNo
footerWidthnumber or “100%“No—width of footer
footerPaddingstringNo0px 20pfooter padding
footerOuterBgColorstringNo—
footerBackgroundColorstringNo—
footerStyleReact.CSSPropertiesNo--
backgroundPositionstringno”bottom”when there is background image url this is css property for position
backgroundRepeatstringno”no-repeat, no-repeat”when there is background image url this is css property for repeat
bgImageTakesAllWrappersstringnofalsewhen there is background image url takes all if width is not 100%, but with 100% it already takes all
borderWidthnumberNo—border width of the body
borderColorstringNo—Border will work if border width is greater than 0
openCounterbooleanNotrueWhen enabled, appends <custom type="tracking"/> at the end of the body content. This tag has no visual effect on the rendered email.
All other standard attributes for the <body> element are supported.

​
Open counter tracking

By default, Body appends a <custom type="tracking"/> tag as the last element inside <body>. This tag does not affect how the email looks in inboxes and is intended for open-counter tracking in downstream email pipelines. 
// Tracking tag is included by default
<Body>...</Body>

// Disable the tracking tag
<Body openCounter={false}>...</Body>