react-email-editor
react-email-editor copied to clipboard
Renders twice with latest nextjs
Same issue as #241
import React, { useRef, useState, useEffect } from "react";
import dynamic from "next/dynamic";
import type { NextPage } from "next";
// Assuming the EmailEditorProps and EditorRef are correctly exported from react-email-editor
import { EditorRef } from "react-email-editor";
import templateJson from "./utils/emailTemplate.json";
const EmailEditor = dynamic(
() => import("react-email-editor").then((mod) => mod.EmailEditor),
{ ssr: false }
);
const TemplateEditor: NextPage = (props: any) => {
const emailEditorRef = useRef<EditorRef>(null);
const [isReady, setIsReady] = useState(false);
const initialized = useRef(false);
const exportHtml = () => {
console.log("exportHtml");
const unlayer = emailEditorRef.current?.editor;
unlayer?.exportHtml((data) => {
const { design, html } = data;
console.log("exportHtml", html);
});
};
const onReady = (unlayer: any) => {
console.log("onReady");
if (!initialized.current) {
unlayer.loadDesign(templateJson);
setIsReady(true);
initialized.current = true;
}
};
const onLoad = (unlayer: any) => {
console.log("onLoad");
unlayer.init({
id: "editor-container",
displayMode: "email",
customJS: [
"https://examples.unlayer.com/examples/simple-custom-tool/custom.js",
],
});
};
return (
<div id="editor-container" className="flex h-screen">
{isReady && (
<div>
<button onClick={exportHtml}>Export HTML</button>
</div>
)}{" "}
<EmailEditor
editorId="email-editor"
ref={emailEditorRef}
onLoad={onLoad}
onReady={onReady}
style={{ height: "100%" }}
/>
</div>
);
};
export default TemplateEditor;
@qixxin Maybe it's because of react strict mode. Do you have same issue on production?