@inkdes-email/box

@inkdes-email/box

Wrapper Box component for your email layout.

GitHub

NPM package

Website

Docs

Demos

Installation

# pnpm
pnpm add @inkdes-email/box

# npm
npm install @inkdes-email/box

# yarn
yarn add @inkdes-email/box

Quick start

import { Box } from "@inkdes-email/box";

export default function EmailTemplate() {
  return <>
      <Box 
        width='120px' 
        padding='10px 16px'
        center 
        borderRadius='10px'
        backgroundColor='#fff' 
        spacing='20px'
        backgroundImageUrl='https://example.com/image.png'
        >
          <Text>
      </Box>
  </>
}

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
backgroundColor	string	Yes	—	—
style	React.CSSProperties	No	-	-
width	number or "100%"	No	—	width of container
padding	string	No	10px 16px	inner padding
className	string	no	—	—
borderRadius	string	No
backgroundImageUrl	string	no		Box background image
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
itemCenter	boolean	no	true	Inner items will be aligned center
center	boolean	no	true	The box will be positioned center of email
borderWidth	number	No	—	border width
borderColor	string	No	—	Border will work if border width is greater than 0

License

MIT © iClasser