-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
React 18 compatibility #794
Comments
@Vaibhav-Agarwal06 |
@lja1018 : is there any plan to make it compatible with React 18? |
@Vaibhav-Agarwal06 On the other hand, I'll review the best I can when someone uploads a PR for a new feature. Or someone else can fork the repository and modify this project for their own use cases. |
This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks! |
This is still an issue we are seeing the react version break on a production build. |
The tui.image editor is still not updated to React-18. |
Hello, tui.image dont work in react-18, but you can create componet yorself import React, { useRef, useEffect, useState, ChangeEvent } from "react";
import TuiImageEditor from "tui-image-editor";
import Button from "../button/Button";
function ImageEditor(props: tuiImageEditor.IOptions) {
const rootEl = useRef<HTMLDivElement>(null);
const [src, setSrc] = useState("");
const [editor, setEditor] = useState<TuiImageEditor | undefined>();
useEffect(() => {
const editor = new TuiImageEditor(rootEl.current as HTMLDivElement, {
...props,
});
const res = document.getElementsByClassName("tui-image-editor-header");
res[0].classList.add("hidden");
setEditor(editor);
}, []);
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
await editor?.loadImageFromFile(e.target.files[0]);
}
};
const downloadImage = (image: string) => {
if (image) {
// Convertimos la imagen en un objeto Blob
fetch(image)
.then((response) => response.blob())
.then((blob) => {
// Creamos un objeto URL para la imagen
const url = URL.createObjectURL(blob);
// Creamos un enlace de descarga y lo agregamos al DOM
const a = document.createElement("a");
a.href = url;
a.download = "image.jpg";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// Liberamos el objeto URL
URL.revokeObjectURL(url);
});
}
};
return (
<>
<img src={src} alt="" />
<input
onChange={handleFileChange}
id="file-tui"
type="file"
className="hidden"
/>
<div className="flex justify-around">
<Button
onClick={() => {
setSrc("");
document.getElementById("file-tui")?.click();
}}
>
Cargar
</Button>
<Button
onClick={() => {
downloadImage(editor?.toDataURL() as string);
// setSrc(editor?.toDataURL() as string);
}}
>
Guardar
</Button>
</div>
<div ref={rootEl} />
</>
);
}
export default ImageEditor;
|
This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks! |
This project looks like it hasn't been maintained in over a year, but I hope it will be compatible with React18. |
Is it compatible with React version 18.
I am getting error when installing it with React version 18.
The text was updated successfully, but these errors were encountered: