Oy-vey: React Email Templates

0.12.1 · abandoned · verified Tue Apr 21

Oy-vey is a utility library for building server-side HTML email templates using React. It provides a set of components (`Table`, `TBody`, `TR`, `TD`, `Img`, `A`) that validate props against email best practices to help ensure compatibility across various email clients. The package also offers `Oy.renderTemplate` to inject rendered React components into a complete HTML email skeleton. Currently at version 0.12.1, the project appears to be largely abandoned, with the last npm publish over five years ago and known, unaddressed issues such as significant TypeScript compilation time increases. Its primary differentiation lies in its React-based component validation for email best practices, but it lacks active development and modern ecosystem support.

Common errors

```
TypeError: Cannot destructure property 'Table' of 'undefined' as it is null.
```
cause Attempting to destructure components (e.g., Table, TBody) directly from the 'oy-vey' package instead of from the default `Oy` export.

fix Ensure `Oy` is imported as the default export (`import Oy from 'oy-vey';`) and then destructure components from the `Oy` object (`const { Table, TBody } = Oy;`).
```
SyntaxError: 'import' and 'export' may only appear at the top level
```
cause Mixing CommonJS `require()` syntax with ES Modules `import` or attempting to use `import` in a CommonJS context without proper transpilation.

fix Ensure your project is configured for ES Modules (e.g., `"type": "module"` in package.json) or use CommonJS `require('oy-vey')` if appropriate for your environment, though examples primarily use `import`.

Warnings

gotcha Using Oy-vey with TypeScript can lead to significantly increased compilation times due to issues with the package's typings. A workaround exists that disables a subset of type-checks.
Fix: Consider disabling a subset of TypeScript type-checks as suggested in GitHub issue #84, or use the library in plain JavaScript.
breaking When migrating to or using Oy-vey with React 16+, attribute names for HTML properties like `bgColor` and `vAlign` must be changed to their standard HTML lowercase forms: `bgcolor` and `valign`.
Fix: Update JSX attributes from `bgColor` to `bgcolor` and `vAlign` to `valign`.
gotcha CSS placed in the `headCSS` option of `Oy.renderTemplate` may be stripped out by various email clients, leading to inconsistent styling. Inline styles are generally more reliable for email.
Fix: Prioritize inline styling for critical CSS properties or use external tools to inline CSS before sending.
gotcha This package appears to be abandoned, with no updates in over five years. Critical bugs or security vulnerabilities are unlikely to be addressed, and it may not be compatible with newer versions of React or Node.js.
Fix: Evaluate alternatives for active development projects. For existing projects, proceed with caution and thorough testing.

Install

npm install oy-vey npm
yarn add oy-vey yarn
pnpm add oy-vey pnpm

Imports

Oy
wrong:
```
import { Oy } from 'oy-vey';
```
correct:
```
import Oy from 'oy-vey';
```
Oy is the default export, providing access to `renderTemplate` and component factories.
Table, TBody, TR, TD
wrong:
```
import { Table, TBody, TR, TD } from 'oy-vey';
```
correct:
```
import Oy from 'oy-vey';
const { Table, TBody, TR, TD } = Oy;
```
Email-specific components (e.g., Table, TR) are exposed as properties on the default `Oy` export, not as direct named exports from the package.

renderTemplate

wrong:

import { renderTemplate } from 'oy-vey';

correct:

import Oy from 'oy-vey';
Oy.renderTemplate(<MyEmail />, options);

`renderTemplate` is a static method on the default `Oy` export.

Quickstart

Demonstrates rendering a simple React email component using Oy-vey and serving it via an Express.js endpoint.

import express from 'express';
import React from 'react';
import Oy from 'oy-vey';

const MyEmailTemplate = ({ username }) => {
  const { Table, TBody, TR, TD } = Oy;
  return (
    <Table width="100%" border="0" cellPadding="0" cellSpacing="0">
      <TBody>
        <TR>
          <TD align="center" style={{ padding: '20px' }}>
            <h1>Hello, {username}!</h1>
            <p>This is a test email rendered with Oy-vey and React.</p>
            <a href="https://example.com" style={{ color: '#1a73e8' }}>Visit our site</a>
          </TD>
        </TR>
      </TBody>
    </Table>
  );
};

const server = express();
server.set('port', (process.env.PORT || 8887));

server.get('/email/hello', (req, res) => {
  const template = Oy.renderTemplate(<MyEmailTemplate username="Developer" />, {
    title: 'Welcome Email',
    previewText: 'A quick intro to our service.',
    headCSS: 'body { font-family: sans-serif; }',
    bgColor: '#f0f0f0'
  });
  res.send(template);
});

server.listen(server.get('port'), () => {
  console.log('Node server is running on port', server.get('port'));
});

view raw JSON →