How to use it in react? about minipaint HOT 6 OPEN

Minipaint is all client code. A bunch of js, css, and html file. It doesn't really matter, the only real requirement is that it is served from the same domain that your react code is running on, so the Javascript can communicate across the boundaries of the iframe.

from minipaint.

This is an example of loading and saving images https://github.com/viliusle/miniPaint/blob/master/examples/open-edit-save.html

For React specifically, you can add a ref to the iframe element to retrieve it if you don't want to use the id.

import { useRef, useEffect } from 'react';

export default function ModalEditTemplate() {
    const minipaintIframe = useRef(null);
    const isMinipaintIframeLoaded = useRef(false);
    
    useEffect(() => {
        if (minipaintIframe.current && isMinipaintIframeLoaded.current) {
            // When the iframe ref is populated from the component template,
            // call API to load image...
            const Layers = minipaintIframe.current.contentWindow.Layers;
            const newLayer = {
                // Reference example I linked above
            };
            Layers.insert(newLayer);
        }
    }, []);

    function onMinipaintIframeLoad() {
        isMinipaintIframeLoaded.current = true;
    }

    return (
        <iframe
              ref={minipaintIframe}
              style={{ width: "70vw", height: "70vh" }}
              src={`https://YOURWEBSITE.COM/miniPaint/`}
              allow="camera"
              onLoad={onMinipaintIframeLoad}
        ></iframe>
    );
}

I haven't tested this code, but theoretically it should work. You need to wait for both the ref for the iframe element to be assigned, and for the iframe to load the minipaint page.

from minipaint.

Also, I didn't notice this at first, but you'll need to self-host minipaint on your own server, not reference it from https://viliusle.github.io/.

Javascript won't talk across iframes on different domains.

from minipaint.

Also, I didn't notice this at first, but you'll need to self-host minipaint on your own server, not reference it from https://viliusle.github.io/.

Javascript won't talk across iframes on different domains.

Thank you very much for your previous response, it has been very helpful to me.
One more question, I have my project separated into client with react and server with strapi (node.js). I have the client hosted on netlify, and the server on railway.
Where should I host mini paint? On railway or on netlify?

from minipaint.

@viliusle may want to consider adding a postMessage API so people can do basic things like load and save images from viliusle.github.io/miniPaint/ without having to self-host.

from minipaint.

from minipaint.