# platemail

> Flexible and simple email rendering in ReactJS

Latest version **0.0.3** (published 2020-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install platemail
pnpm add platemail
yarn add platemail
bun add platemail
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-05-28 |
| First published | 2020-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 44.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Dawkes |
| Maintainers | ad-h4 |

## Links

- npm: https://www.npmjs.com/package/platemail
- npm.io page: https://npm.io/package/platemail

## Dependencies (4)

- [he](https://npm.io/package/he.md) ^1.2.0
- [@types/he](https://npm.io/package/@types/he.md) ^1.1.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.23
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.5

## Recent versions

- 0.0.3 (latest) — 2020-05-28
- 0.0.2 — 2020-05-28

## README

# Platemail

Simple, flexible email rendering for React!

Features:

- Create your own email template using pre-built components or custom components
- Email is rendered in both HTML and Text format. Giving full control over text rendering

Future Features:

- Pre-built templates and styling - with the ability to customise
- Simple customisation through controlling/providing top level styles
- Defining/Creating custom components with custom styling & props
- Complete Validation - compatibility check with email clients to ensure the email will render as intended

## Install

`yarn add platemail`

## Example Usage

Examples can be found in the `examples/` directory. These examples are used in testing.

```typescript
import Platemail from "platemail";
import { Paragraph, Email } from "platemail";

let MyWelcomeEmail = (user: { name: string }) => (
  <Email>
    Hi {user.name} and welcome to our website! Hope you have a great time!
  </Email>
);

let renderer = new Platemail();

let result = renderer.render(MyWelcomeEmail, { name: "Jane" });

// result.body.html contains the html version whereas result.body.text
```

Using a custom component inside an email template can be done using the `createComponent` functionality. The function require both a text version and a html version of your component. The following example can be found in the `examples/` directory.

```typescript
import Platemail from "platemail";
import { Email, createComponent } from "platemail";

function customHtmlComponent(props: any): React.ReactElement<any> {
  return <Paragraph>Welcome {props.user}!</Paragraph>;
}

function customTextComponent(props: any): React.ReactElement<any> {
  return (
    <>
      Welcome {props.user}!{"\n\n"}
    </>
  );
}

let WelcomeMessage = createComponent(customTextComponent, customHtmlComponent);

export let customEmailTemplate = (email: {
  subject: string;
  user: { name: string };
}) => {
  return (
    <Email subject={email.subject}>
      <WelcomeMessage user={email.user.name} />
    </Email>
  );
};
```

In the future the plan is to move the createComponent functionality inside of the Platemail class, more detail as to why will come with validation of email templates.

## Future/Vision ReadMe

NOTE: The following documentation helps show the vision for the direction of platemail. The following examples and usage are yet to be developed.

You can also define your own components with their own configuration and params!

```typescript

renderer.setBaseTemplate(platemail.BaseLogoTemplate)
renderer.configure(platemail.BaseLogoTemplate, {
  logoUrl: 'url'
  styles: {
    "backgroundColor": "#fff"
  }
})

type UserConfig = {
  color: string;
  fontWeight: string;
}

type MyParams = {
  user: {name: string}
}
let MyUser = platemail.component<MyConfig, MyParams>({
  text: (user) => `**#{user.name}**`
  html: (user) => {
    let config = platemail.useConfig(MyUser);
    return <span style={{color: config.color, fontWeight: config.fontWeight}}>{user.name}</span>
  }
}
renderer.registerComponent(MyUser);
```

Then you can configure and use it!

```typescript
let MyWelcomeEmail = (user: { name: string }) => (
  <platemail.Email>
    Hi <MyUser user={user} /> and welcome to our website! Hope you have a great
    time!
  </platemail.Email>
);
```

Don't forget to configure your components before rendering!

```typescript
renderer.configure(MyUser, {
  color: "#555"
  fontWeight: bold;
})
```

For styling purposes, its best to configure the base style configuration that everyone uses:

```typescript
renderer.configure(platemail.Styles, {
  'body': { backgroundColor: "#fff"; fontFamily: 'Verdana' }
  'myClass': {values here }
});
```

Then you can fetch the style from the component:

```typescript
let comp = () => {
  let myClass = platemail.useStyle("myClass");
  return <p style={myClass}>content here</p>;
};
```

---
_Source: https://npm.io/package/platemail · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._