Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): Preview for components #1733

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

gabrielmfern
Copy link
Collaborator

THis PR implements a snippet that allows us to pass in React code that contains
a Email constant containing a React component for an example email using the
given component. An example of its usage would be

<ComponentPreview
    code='
import { Button } from "@react-email/components";

const Email = () => {
    return <Button>Hello world!</Button>;
}
'
>
```jsx
import { Button } from "@react-email/components";

const Email = () => {
    return <Button>Hello world!</Button>;
}
```
</ComponentPreivew>

It does require us to write the code twice due to Mintlify limitations, as it
does not have a proper component for rendering code outside using common
Markdown backticks.

Another limitation to this snippet caused by Mintlify is that on the CodeBlock
preview, the actual rendered code on the preview looses its indentation due to
some internal problem in Mintlify. We really should address that before merging
this.

On another note, the way this snippet works is by using jsdelivr to get
@react-email/components and React itself, on an iframe. It has some base code
that is the starting srcDoc for the iframe that uses the code to render and
then writes out the given HTML into the iframe's document. This does give a bit
of a moment of white that makes the experience a bit poorer, but is unavoidable
unless we could use actual React inside the docs.

Copy link

changeset-bot bot commented Oct 14, 2024

⚠️ No Changeset found

Latest commit: e2739f8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Oct 14, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-email ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 14, 2024 3:41pm
react-email-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 14, 2024 3:41pm

@gabrielmfern gabrielmfern force-pushed the feat/component-previews-on-docs branch from 0ed0c71 to 6e5bb82 Compare October 14, 2024 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant