{"id":16164,"library":"oy-vey","title":"Oy-vey: React Email Templates","description":"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.","status":"abandoned","version":"0.12.1","language":"javascript","source_language":"en","source_url":"https://github.com/oysterbooks/oy","tags":["javascript","react","email","typescript"],"install":[{"cmd":"npm install oy-vey","lang":"bash","label":"npm"},{"cmd":"yarn add oy-vey","lang":"bash","label":"yarn"},{"cmd":"pnpm add oy-vey","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for building UI components.","package":"react","optional":false},{"reason":"Peer dependency for server-side rendering of React components.","package":"react-dom","optional":false}],"imports":[{"note":"Oy is the default export, providing access to `renderTemplate` and component factories.","wrong":"import { Oy } from 'oy-vey';","symbol":"Oy","correct":"import Oy from 'oy-vey';"},{"note":"Email-specific components (e.g., Table, TR) are exposed as properties on the default `Oy` export, not as direct named exports from the package.","wrong":"import { Table, TBody, TR, TD } from 'oy-vey';","symbol":"Table, TBody, TR, TD","correct":"import Oy from 'oy-vey';\nconst { Table, TBody, TR, TD } = Oy;"},{"note":"`renderTemplate` is a static method on the default `Oy` export.","wrong":"import { renderTemplate } from 'oy-vey';","symbol":"renderTemplate","correct":"import Oy from 'oy-vey';\nOy.renderTemplate(<MyEmail />, options);"}],"quickstart":{"code":"import express from 'express';\nimport React from 'react';\nimport Oy from 'oy-vey';\n\nconst MyEmailTemplate = ({ username }) => {\n  const { Table, TBody, TR, TD } = Oy;\n  return (\n    <Table width=\"100%\" border=\"0\" cellPadding=\"0\" cellSpacing=\"0\">\n      <TBody>\n        <TR>\n          <TD align=\"center\" style={{ padding: '20px' }}>\n            <h1>Hello, {username}!</h1>\n            <p>This is a test email rendered with Oy-vey and React.</p>\n            <a href=\"https://example.com\" style={{ color: '#1a73e8' }}>Visit our site</a>\n          </TD>\n        </TR>\n      </TBody>\n    </Table>\n  );\n};\n\nconst server = express();\nserver.set('port', (process.env.PORT || 8887));\n\nserver.get('/email/hello', (req, res) => {\n  const template = Oy.renderTemplate(<MyEmailTemplate username=\"Developer\" />, {\n    title: 'Welcome Email',\n    previewText: 'A quick intro to our service.',\n    headCSS: 'body { font-family: sans-serif; }',\n    bgColor: '#f0f0f0'\n  });\n  res.send(template);\n});\n\nserver.listen(server.get('port'), () => {\n  console.log('Node server is running on port', server.get('port'));\n});","lang":"javascript","description":"Demonstrates rendering a simple React email component using Oy-vey and serving it via an Express.js endpoint."},"warnings":[{"fix":"Consider disabling a subset of TypeScript type-checks as suggested in GitHub issue #84, or use the library in plain JavaScript.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update JSX attributes from `bgColor` to `bgcolor` and `vAlign` to `valign`.","message":"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`.","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Prioritize inline styling for critical CSS properties or use external tools to inline CSS before sending.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Evaluate alternatives for active development projects. For existing projects, proceed with caution and thorough testing.","message":"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.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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;`).","cause":"Attempting to destructure components (e.g., Table, TBody) directly from the 'oy-vey' package instead of from the default `Oy` export.","error":"TypeError: Cannot destructure property 'Table' of 'undefined' as it is null."},{"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`.","cause":"Mixing CommonJS `require()` syntax with ES Modules `import` or attempting to use `import` in a CommonJS context without proper transpilation.","error":"SyntaxError: 'import' and 'export' may only appear at the top level"}],"ecosystem":"npm"}