React 18 compatibility

[Vaibhav-Agarwal06]

Is it compatible with React version 18.

I am getting error when installing it with React version 18.

[lja1018]

@Vaibhav-Agarwal06 It is still compatible until React 17.

[Vaibhav-Agarwal06]

@lja1018 : Thanks for the reply.

is there any plan to make it compatible with React 18?

[lja1018]

@Vaibhav-Agarwal06 The team behind TOAST UI products is not developing TOAST UI only. So it's tough to share the roadmap in general. Please understand that.

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.

[stale[bot]]

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!

[ajnozari]

This is still an issue we are seeing the react version break on a production build.

[mcst]

The tui.image editor is still not updated to React-18.

[luis030821]

Hello, tui.image dont work in react-18, but you can create componet yorself you see mi example

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;

[stale[bot]]

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!

[kmk-matsui]

This project looks like it hasn't been maintained in over a year, but I hope it will be compatible with React18.