Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Last, but not least... Announcing React Email 3.0. 1. Brand new component library 2. 11x performance improvement 3. Support for React 19 RC 4. Deprecation of renderAsync 5. Supabase Email Hook

73,480 görüntüleme • 2 yıl önce •via X (Twitter)

16 Yorum

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

First of all, I just wanted to say thank you. React Email now has 270,627 weekly downloads on npm, that is a 136% increase since the last major released 7 months ago. We also have 13,503 stars on GitHub and would like to thank all the 132 contributors who made this possible.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

1. Brand new component library As developers, we are big fans of projects like @tailwindui and @shadcn UI. We want to provide that same experience, so we made 54 components for you to create beautiful emails.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

When you go to you will see all the available categories, including e-commerce, marketing, and more.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

Once you find a component you like, you can see the preview on desktop and mobile.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

When you inspect the code, you will see two options: Inline CSS or Tailwind CSS. Pick your preferred option, and copy the code directly into your project.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

2. 11x performance improvement Great developer experiences mean fast startup times. That's true for any framework, library, or tool. That's why we decided to focus on improving the performance of React Email 3.0 even more.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

We ran a performance benchmark for the old version of React Email (2.1.6) against the new one (3.0.0), and the results were massive. P99 (99th percentile) • Old version: 11331ms • New version: 975ms

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

The tests evaluated the startup time, plus the time to render the first email preview, and were executed on a Linux machine with 3.7 GHz 12-core AMD Ryzen 9 5900x CPU, 16 GB 3600 MHz DDR4 memory. See benchmark details:

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

3. Support for React 19 RC Even though React 19 is still a Release Candidate, we have made some changes to ensure compatibility in the future. To make that happen, we had to implement a few internal changes so that the render function works 100% with React 19.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

4. Deprecation of renderAsync The new version of React will deprecate `renderToStaticMarkup`, which would break our old `render` function. That is why we decided to deprecate our old `renderAsync` in favor of a new `render` function, which will be async by default.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

If you are using `renderAsync` now, you need to replace it with the new `render`. If you are using the old render, you have to treat the new Promise that it returns. This is going to pave the way for future headache-free upgrades for all users.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

5. Supabase Email Hook @supabase users have been asking for a better way to customize their authentication emails. Before, you had to create a React Email template, then export the HTML result, and copy it to the Supabase UI. Needless to say, this was hard to maintain.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

Now, Supabase released a new feature called Email Hooks that allows you to use a custom email provider to send emails directly from edge functions. This enables you to use React Email templates directly in Supabase:

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

This enables you to use React Email templates directly in Supabase: Read the docs: Find the code: @thorwebdev from Supabase recorded a video showing how it works:

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

Shoutout to @gabrielmfern, @luxonauta, and @leandrodragani. Without you, this release wouldn't exist.

Zeno Rocha profil fotoğrafı
Zeno Rocha2 yıl önce

Thank you all for following this launch week! We still have a surprise left for tomorrow, so don't forget to check it out 🤫

Benzer Videolar

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is *on* the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes *without* modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️

Justin Schroeder

11,677 görüntüleme • 4 ay önce