https://github.com/anfragment/react-email-dynamic
Render dynamic React Email templates at runtime.
https://github.com/anfragment/react-email-dynamic
email react react-email
Last synced: about 2 months ago
JSON representation
Render dynamic React Email templates at runtime.
- Host: GitHub
- URL: https://github.com/anfragment/react-email-dynamic
- Owner: anfragment
- License: mit
- Created: 2024-03-28T18:56:48.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-23T23:51:31.000Z (9 months ago)
- Last Synced: 2025-05-08T21:14:08.088Z (about 2 months ago)
- Topics: email, react, react-email
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-email-dynamic
- Size: 65.4 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Email Dynamic
## Introduction
React Email Dynamic is a library that allows for **runtime** rendering of templates written with [React Email](https://react.email) components and JSX. This can be useful in scenarios where you want to keep your templates in a database or make them editable by non-developers. It uses [SWC](https://swc.rs) to compile the JSX and [React Email](https://react.email) itself to render the components.
## Installation
### NPM
```bash
npm install react-email-dynamic
```
### PNPM
```bash
pnpm install react-email-dynamic
```
### Yarn
```bash
yarn add react-email-dynamic
```
## Usage
```javascript
import { render } from 'react-email-dynamic';
const template = `
Hello, World!
Click me
`;
(async () => {
const html = await render(template);
const plainText = await render(template, {
reactEmailRenderOptions: {
plainText: true,
},
});
})();
```
## API
### `render(template: string, options?: RenderOptions): Promise`
Renders the given template string into an HTML string asynchronously.
### `renderSync(template: string, options?: RenderOptions): string`
Renders the given template string into an HTML string synchronously. Use in environments where asynchronous calls are not possible or desired.
### `RenderOptions`
- `reactEmailRenderOptions?: @react-email/render.Options`: Options passed to the [React Email's render function](https://react.email/docs/utilities/render). Pass `{ plainText: true }` to render plain text instead of HTML.
- `scope?: Record`: An object serving as the scope for the template. Enables the passing of data and/or custom components. See the [Advanced Usage](#advanced-usage-custom-components-and-data) section for more information.
- `swcOptions?: swc.Options`: Configuration options for the [SWC compiler](https://swc.rs/docs/usage/core#transform), allowing adjustments to the JSX parser and other compile-time settings.
## Security
This library does not perform input validation or sanitization. Passing user input directly to the template string or the scope object can lead to arbitrary code execution and XSS (Cross-Site Scripting) attacks. Only allow a trusted source to modify the template. If you need to pass user input to the template via the `scope` object, ensure each value is sanitized. Possible solutions include using libraries such as [DOMPurify](https://www.npmjs.com/package/dompurify) or [sanitize-html](https://www.npmjs.com/package/sanitize-html).
## Advanced Usage (custom components and data)
You can pass custom components and data into the template by using the `scope` option. The values can be any valid React component or data type. **This can lead to vulnerabilities**, so check the [Security](#security) section before using this feature.
```javascript
import { render } from 'react-email-dynamic';
const template = `
{message}
`;
const scope = {
message: 'Hello, World!',
CustomComponent: () => Custom component,
};
(async () => {
const html = await render(template, { scope });
})();
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.