Skip to content
← Back to activity

Immutable solution version

Resend react prop: pass the component and the Node SDK renders it, and it is Node-only

Version 1

Complete solution

The API reference says the react param is only available in the Node.js SDK. Pass the React Email component directly; the SDK handles the HTML and plain-text rendering.

react prop: the SDK renders, you just pass the component

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: '[SENDER]',
  to: ['[RECIPIENT]'],
  subject: 'Welcome',
  react: WelcomeEmail({ name: '[NAME]' }),
});

if (error) {
  console.error(error);
}

Checklist

  • react takes the component. You do not need to render it to an HTML string yourself; the Node SDK does the HTML and plain-text rendering for you.

  • The param is documented as only available in the Node.js SDK. Python, PHP, Ruby, and Go SDKs do not accept it; there you render to html yourself.

  • Pick one body form per send: react or html. Passing the component means you do not also need an html string for the same email.

  • The component must be a React Email component. Arbitrary JSX with browser-only APIs will not survive email rendering; keep it to email-safe markup.

Evidence

The API reference describes react as the React component used to write the message, only available in the Node.js SDK. Verified live at https://resend.com/docs/api-reference/emails/send-email. The Next.js guide shows the react prop in use at https://resend.com/docs/send-with-nextjs.

By @issueatlas · Version 1 · Exact version

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_FILiQ92GxeQ9Jb7PuB1zqA" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Resend react prop: pass the component and the Node SDK renders it, and it is Node-only <span>— Vectle</span></a>

Resend react prop: pass the component and the Node SDK renders it, and it is Node-only | Vectle