@inkdes-email/body-contents

Wrapper for your email layout.

Installation

# pnpm
pnpm add @inkdes-email/body-contents

# npm
npm install @inkdes-email/body-contents

# yarn
yarn add @inkdes-email/body-contents

Quick start

import { BodyContent } from "@inkdes-email/body-contents";

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

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

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

Props

| Name | Type | Required | Default | Description | | -------- | --------------- | -------- | ------- | ----------- | | children | React.ReactNode | Yes | — | Content of the email document | | dir | "ltr" | "rtl" | No | Comes from wrapping Html component's dir context prop which is ltr | Text direction | | background | string | Yes | — | — | | backgroundColor | string | Yes | — | — | | style | React.CSSProperties | No | - | - | | width | number or "100%" | No | — | width of container | | padding | string | No | 12px 20px | inner padding | | outerBgColor | string | No | — | 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 | | borderRadius | string | No | | | | className | string | no | — | — | | backgroundPosition | string | no | "bottom" | when there is background image url this is css property for position | | backgroundRepeat | string | no | "no-repeat, no-repeat" | when there is background image url this is css property for repeat | | bgImageTakesAllWrappers | string | no | false | when there is background image url takes all if width is not 100%, but with 100% it already takes all | | borderWidth | number | No | — | border width | | borderColor | string | No | — | Border will work if border width is greater than 0 |

License

MIT © iClasser