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

export default function EmailTemplate() {
  return <Text spacing='10px' fontWeight='400' fontFamily='Arial' fontSize='20px'>
  Hello world!
  </Text>;
}

​
Props

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYes—Content of the email document
colorstringNo—#000
fontSizestringNo—
fontWeightstringNo—
lineHeightstringNo—
fontFamilystringNo—
classNamestringNo—
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction for the wrapper cell
spacingstringNoComes from wrapping Html component’s defaultSpacing context prop which is 20pxSpacing bottom, by default comes from Html defaultSpacing prop
styleReact.CSSPropertiesNo—
plainbooleanNofalseUsed when you don’t want to use table or margin bottom just a paragraph without spacing
letterSpacingstringNo—
inlinebooleanNofalseUsed when you want to write something in one line inside another component without spacing
hrefstringNo-If you want to convert the text to link
paddingCSS padding style stringNo""Only works if its either inline or plain and you can add a css string
All other standard attributes for the <text> element are supported.