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 { BodyContent } from "@inkdes-email/components";

export default function EmailTemplate() {
  return <>
      <BodyContent>
          <title>Header</title>
      </BodyContent>

      <BodyContent>
          <title>Body</title>
      </BodyContent>

      <BodyContent>
          <title>Footer</title>
      </BodyContent>
  </>
}

​
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
classNamestringno——
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
borderColorstringNo—Border will work if border width is greater than 0