EditorPage.tsx
801 Bytes
import React, { useRef, useEffect, useState } from "react";
import ToastEditor from "tui-image-editor";
import { editorOptions } from "utils/editorOptions";
import "tui-image-editor/dist/tui-image-editor.css";
import "./Editor.scss";
import "./EditorPage.scss";
// @ts-ignore
const initialEditor:ToastEditor = new ToastEditor(document.querySelector("#hidden-editor"), editorOptions);
function EditorPage() {
const imageEditorRef = useRef<HTMLDivElement>(null);
const [editor, setEditor] = useState(initialEditor);
useEffect(() => {
// @ts-ignore
setEditor(new ToastEditor(imageEditorRef.current, editorOptions));
return () => {
initialEditor.destroy();
};
}, []);
return (
<div className="my-editor" ref={imageEditorRef} />
);
}
export default EditorPage;