Build a React.js HTML CSS & Gmail Email Renderer & iFrame Viewer With CSS in JSX Using react-email

App.jsx

// Build a React.js HTML CSS & Gmail Email Renderer & iFrame Viewer With CSS in JSX Using react-email  

import React from "react";
import { Letter } from "react-letter";

const App = () => {
  // Simulated Gmail-style email content
  const emailContent = `
    <html>
      <head>
        <style>
          body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f6f6f6;
          }
          .email-container {
            max-width: 600px;
            margin: 20px auto;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
          }
          .email-header {
            background-color: #4285f4;
            color: #ffffff;
            padding: 20px;
            text-align: center;
          }
          .email-body {
            padding: 20px;
          }
          .email-footer {
            background-color: #f1f1f1;
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: #555;
          }
          a {
            color: #4285f4;
            text-decoration: none;
          }
          a:hover {
            text-decoration: underline;
          }
        </style>
      </head>
      <body>
        <div class="email-container">
          <div class="email-header">
            <h1>Welcome to Our Service!</h1>
          </div>
          <div class="email-body">
            <p>Dear User,</p>
            <p>We're excited to have you on board. Here are a few things you can explore:</p>
            <ul>
              <li><a href="https://example.com/features">Discover Features</a></li>
              <li><a href="https://example.com/support">Get Support</a></li>
              <li><a href="https://example.com/settings">Manage Settings</a></li>
            </ul>
            <p>Thank you for choosing our service!</p>
            <p>Best Regards,</p>
            <p>The Example Team</p>
          </div>
          <div class="email-footer">
            <p>&copy; 2024 Example Inc. All rights reserved.</p>
            <p>
              <a href="https://example.com/unsubscribe">Unsubscribe</a> |
              <a href="https://example.com/privacy">Privacy Policy</a>
            </p>
          </div>
        </div>
      </body>
    </html>
  `;

  // Function to rewrite external links
  const rewriteExternalLinks = (url) => {
    return `${url}?utm_source=email`;
  };

  return (
    <div style={{ padding: "20px" }}>
      <h2>Rendered Email:</h2>
      <div style={{ width: "100%" }}>
        <Letter
          html={emailContent}
          useIframe={true}
          iframeTitle="Sample Gmail Email"
          rewriteExternalLinks={rewriteExternalLinks}
          allowedSchemas={["http", "https", "mailto"]}
          className="email-wrapper"
          preserveCssPriority={true}
          style={{ width: "100%", border: "none" }}
        />
      </div>
      <style jsx>{`
        iframe {
          width: 100% !important;
          height:100vh !important;
        }
      `}</style>
    </div>
  );
};

export default App;

100

101

102

103

104

105

106

107

108

109

110

// Build a React.js HTML CSS & Gmail Email Renderer & iFrame Viewer With CSS in JSX Using react-email

import React from "react";

import { Letter } from "react-letter";

const App = () => {

// Simulated Gmail-style email content

const emailContent = `

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f6f6f6;

}

.email-container {

max-width: 600px;

margin: 20px auto;

background: #ffffff;

border: 1px solid #ddd;

border-radius: 5px;

overflow: hidden;

}

.email-header {

background-color: #4285f4;

color: #ffffff;

padding: 20px;

text-align: center;

}

.email-body {

padding: 20px;

}

.email-footer {

background-color: #f1f1f1;

text-align: center;

padding: 10px;

font-size: 12px;

color: #555;

}

a {

color: #4285f4;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>Welcome to Our Service!</h1>

</div>

<p>We're excited to have you on board. Here are a few things you can explore:</p>

<ul>

<li><a href="https://example.com/features">Discover Features</a></li>

<li><a href="https://example.com/support">Get Support</a></li>

<li><a href="https://example.com/settings">Manage Settings</a></li>

</ul>

<p>Thank you for choosing our service!</p>

<p>Best Regards,</p>

<p>The Example Team</p>

</div>

<p>

<a href="https://example.com/unsubscribe">Unsubscribe</a> |

<a href="https://example.com/privacy">Privacy Policy</a>

</p>

</div>

</body>

</html>

// Function to rewrite external links

const rewriteExternalLinks = (url) => {

return `${url}?utm_source=email`;

};

return (

<h2>Rendered Email:</h2>

<Letter

html={emailContent}

useIframe={true}

iframeTitle="Sample Gmail Email"

rewriteExternalLinks={rewriteExternalLinks}

allowedSchemas={["http", "https", "mailto"]}

className="email-wrapper"

preserveCssPriority={true}

style={{ width: "100%", border: "none" }}

</div>

<style jsx>{`

iframe {

width: 100% !important;

height:100vh !important;

}

`}</style>

</div>

);

};

export default App;

Build a React.js HTML CSS & Gmail Email Renderer & iFrame Viewer With CSS in JSX Using react-email

Comments

Leave a Reply Cancel reply

Archives