Multiple PreviewProps

[fermentfan]

• Component or Package Name: jsx-email
• Component or Package Version:

Feature Use Case

We're currently in a situation where we have different 'types' of single e-mail templates depending on what props we feed. For example one might be targeting a registered user or a guest which changes the greeting line. I'd love to quickly render the different types in the preview, but we need to do this with commented out props right now which we then need to comment in/out and this involves the developer to have insider knowledge about the template.

Feature Proposal

Allow the definition of multiple PreviewProp sets maybe even with a name for each. Then show these sets in the preview and make them clickable to then render the selected one.

[shellscape]

Interesting idea. Since templates are just functions at the end of the day, I'd recommend that instead of additional overhead in the preview UX (which gets passed to users), why not create a directory of files; where each file corresponds to the different state of the props you want to preview. Each template file in this directory would import the base template that handles the type switching based on the props, and re-export that as the template. Something like this:

// type-switching-template.tsx
export const Template = (...) => { ... }

// types/type-a.tsx
import { Template as TypeSwitch } from '../type-switching-template';

export const PreviewProps = { ... specific props for this type ... };
export const Template = TypeSwitch;

That should ultimately provide a lot more flexibility, and the UX should be better for your developers, as each type state will be represented in the nav on the left of the preview app.