Starter needing help

[cedricbraekevelt]

Hi Marc,

Thanks for the great library, however I'm quite a starter in react. (not really my strong suit). I was curious how if I can seed the data from a variable (in my case fileContent). I have used the following code working before to load the content of a file, but I don't know how to insert this value into the DrawIOEmbed element.

import { useState, useEffect } from 'react'
import { DrawIoEmbed } from 'react-drawio';

export default function RenderDrawIO ({fileName}) {
    const [fileContent, setFileContent] = useState(undefined);
    const drawioRef = useRef<DrawIoEmbedRef>(null);

    useEffect(() => {
      const getFile = async () => {
        const response = await fetch(`/drawio/${fileName}.excalidraw`);
        const value = await response.json();
        setFileContent(value);
      }
      getFile();
    }, []);

    return (
      <DrawIoEmbed 
       xml="test.drawio"
      UrlParameters={{
        spin: true,
        libraries: false,
        noSaveBtn: true,
        noExitBtn: true
      }} />
      );
  }

Any possibility you're able to assist? :)

Regards, Cédric

[marcveens]

Thanks for using this library! Of course I'm willing to assist. As far as I see you're almost there. Did you try this as your return statement?

<DrawIoEmbed
  xml={fileContent}
  urlParameters={{
    spin: true,
    libraries: false,
    noSaveBtn: true,
    noExitBtn: true,
  }}
/>;

Please also be aware that excalidraw and draw.io are 2 different products, so that will also cause some issues here.

Let me know if more help is needed

[cedricbraekevelt]

Hi Marc,

Thanks for answering, of course, the .excalidraw had to be changed to .drawio 😄 However I also had to change the .json in my fetching function to .text as drawio uses xml instead of json.

Now I got it embedded, thanks for the help and the awesome product! 😃