react-email
react-email copied to clipboard
resendlabs
Support for props in the preview app
Hi!
It would be great if the preview app could be used to edit props of a specific email. That could be useful to test out edge cases with long values, different alphabets,...
Would also be nice if we could supply default values only meant to be used for the preview app.
I support this suggestion, however there is a solid solution for the default value problem.
You can destructure your prop object and add whatever defaults you want.
When the preview app renders the email, the defaults are used:
interface EmailProps {
/**
* User's first name
*/
firstname: string;
/**
* User's last name
*/
lastname: string;
}
const Email: React.FC<EmailProps> = ({
firstname = "John",
lastname = "Doe",
}) => {
return (
<Html>
<Section>
<Text>
Hello {firstname} {lastname}
</Text>
</Section>
</Html>
);
};
Best part of this solution is that even though you supply defaults and the preview app doesn't throw an error, the typescript server does:
This is a SUPER interesting feature.
An inspiration that came to mind was Microlink Cards: https://cards.microlink.io/editor?preset=workos
Great point about the default values @ImBaedin, I feel like we should update all demos to contain that pattern. Do you want to send a PR?
Great point about the default values @ImBaedin, I feel like we should update all demos to contain that pattern. Do you want to send a PR?
You're talking about these demos right? If so, sounds like fun 😊