Skip to main content

​
1. Install dependencies

Install the InkDes Email package locally and a few components. 
# pnpm
pnpm add @inkdes-email/components

# npm
npm install @inkdes-email/components

# yarn
yarn add @inkdes-email/components

​
2. Usage

import { Body } from "@inkdes-email/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
All other standard attributes for the <body> element are supported.
⌘I