0

Ok, this question sounds weird, but hear me out:

I am ussing @uppy/react, and it offers some buttons to trigger cloud file provider uploads (Google Drive, DropBox, etc)

I can get those buttons with document.querySelector.

I want to render a custom component inside one of them, but I can't figure out how! I tried ReactDom's createPortal and render methods in a few different ways but none of them work.

I know this is very anti-pattern, but I haven't managed to talk my designer out of the idea yet...

Here is what I'm currently trying:

const GDriveToggle = () => {
  const el = document.querySelector('[data-cy="GoogleDrive"]');

  const node = document.createElement("div") // I have also tried React.createElement here

  useEffect(() => {
    if (el && node) {
      ReactDOM.createPortal(<div>Foo</div>, node); // I have also tried render() here
      el?.appendChild(node)

      console.log(el) // el has node inside of it
      console.log(node) // node has the foo text inside of it

      // but none show up inside the button on the page, I'm guessing it gets lost on any 
         // rerender?
    }
  }, [el, node]);

  return null;
};
Felipe Israel
  • 11
  • 4
  • You may want to look into https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver I once was able to use it to watch for react re-renders and force a dom manipulation (adding an element) on a react-managed component. Redo it every time react made my elements disappear due to rerender. – WillD Mar 22 '22 at 15:25
  • @WillD That sounds promissing! How did you get your elements into the node? Did you use portals? – Felipe Israel Mar 22 '22 at 15:51
  • In my case I once I detected the element I wanted to insert children into was added to the document by react (or rerendered by react) I just use vanilla js functions such as `document.createElement` `.insertAdjacentHTML` etc in the callback – WillD Mar 22 '22 at 20:23

0 Answers0