@inkdes-email/components
v0.10.26
Published
All InkDes email components in one package
Maintainers
iclasserReadme
@inkdes-email/components
InkDes react email components library. You can create emails with these components well tested for email compatibility.
Installation
# pnpm
pnpm add @inkdes-email/components
# npm
npm install @inkdes-email/components
# yarn
yarn add @inkdes-email/componentsQuick start
import { Html, Head, Font, Body, Img, Text, Card, Table, Button, getHtml } from "@inkdes-email/components";
export default function EmailTemplate() {
return <Html>
<Head>
<Font
family="Inter"
url="https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZJhiJ-Ek-_EeAmM.woff2"
format="woff2"
fallback="Arial"
style="normal"
weight="400"
targetSelectors={['html', 'body', '.inkdes-table']}
/>
<title>Platform name</title>
</Head>
<Body
previewText="Some preview pre-header text."
width={376}
padding="20px 20px"
outerBgColor="#fff"
backgroundColor="#f2f6f7"
>
<Img
src="https://github.com/user-attachments/assets/8e885609-d2bb-46ab-a760-ae896757ff60"
alt="Cat"
width={48}
height={48}
/>
<Text fontSize="14px" fontWeight="400" color="#000">
Hello from InkDes!
</Text>
<Card
header={
<Fragment>
<Img
src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/75.0.1/chromium/chromium_48x48.png"
alt="Cat"
width={48}
height={48}
borderRadius="100%"
/>
<Text textColor="white" fontSize="20px">
InkDes
</Text>
</Fragment>
}
headerBackgroundColor="#000"
content={<Text>Welcome to InkDes!</Text>}
borderRadius="24px"
padding="12px 15px"
width="100%"
/>
<Table border padding='10px'>
<Table.Row align="left" valign="middle">
<Table.Col>Cell 1</Table.Col>
<Table.Col>Cell 2</Table.Col>
</Table.Row>
<Table.Row >
<Table.Col>Cell 1</Table.Col>
<Table.Col>Cell 2</Table.Col>
</Table.Row>
</Table>
<Button
align="center"
href="https://inkdes.com"
text="Confirm"
backgroundColor="#000"
textColor="#fff"
/>
</Body>
</Html>
}
const { html, error } = getHtml(<EmailTemplate />);
if (error) {
// handle error
} else if (html) {
// use html
}Components
- Html
- Head
- Css
- Font
- Body
- BodyContents
- Button
- Img
- Text
- Card
- Badge
- Hr
- Table
- A
- Ul
- Ol
- Li
- Box
Helper
- getHtml
- getText
Support
This component was tested using the most popular email clients.
License
MIT © iClasser