Communicating With A Functional Component Outside Of React

I want to be able to communicate with my react component from outside of the component in normal HTML (needed due to embedding a component in another system). I've been researching

Solution 1:

Saving the function in the window object:

const rootElement = document.getElementById("root");

if (rootElement) {
  ReactDOM.render(
    <Hello />,
    rootElement
  );
}

functionHello() {

  functionalertOne() {
    alert("hi from 1");
  }
  
  window.helloComponentAlert = alertOne;
  
  return (
    <div><h1>Hello, world! </h1><UpdateButton /></div>
  );
}

functionUpdateButton() {
  functionalertTwo() {
    alert("hi from 2");
  }

  return<buttononClick={alertTwo}> Click Me Inside React</button>;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script><script>consthandleClick = () => {
  window.helloComponentAlert();
}
</script><buttononclick="handleClick()">Click me outside react</button><divid="root"></div>

---

Event driven approach:

const rootElement = document.getElementById("root");

if (rootElement) {
  ReactDOM.render(
    <Hello/>,
    rootElement
  );
}

functionHello() {

  functionalertOne() {
    alert("hi from 1");
  }

  React.useEffect(() => {
     window.addEventListener(
       "someEvent",
       alertOne,
       false
    );
  }, []);
  
  return (
    <div><h1>Hello, world! </h1><UpdateButton /></div>
  );
}

functionUpdateButton() {
  functionalertTwo() {
    alert("hi from 2");
  }

  return<buttononClick={alertTwo}> Click Me Inside React</button>;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script><script>consthandleClick = () => {
  var someEvent = newEvent("someEvent");
  window.dispatchEvent(someEvent);
}
</script><buttononclick="handleClick()">Click me outside react</button><divid="root"></div>

---

Event driven approach with passing additional data:

const rootElement = document.getElementById("root");

if (rootElement) {
  ReactDOM.render(
    <Hello/>,
    rootElement
  );
}

functionHello() {

  functionalertOne(e) {
    alert("hi from 1 " + e.detail);
  }

  React.useEffect(() => {
     window.addEventListener(
       "someEvent",
       alertOne,
       false
    );
  }, []);
  
  return (
    <div><h1>Hello, world! </h1><UpdateButton /></div>
  );
}

functionUpdateButton() {
  functionalertTwo() {
    alert("hi from 2");
  }

  return<buttononClick={alertTwo}> Click Me Inside React</button>;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script><script>consthandleClick = () => {
  var someEvent = newCustomEvent("someEvent", {detail: "SomeAdditionalData"});
  window.dispatchEvent(someEvent);
}
</script><buttononclick="handleClick()">Click me outside react</button><divid="root"></div>

Solution 2:

const rootElement = document.getElementById("root");
window.alertEvent = newEvent('alert');

if (rootElement) {
  ReactDOM.render(
    <Hello/>,
    rootElement
  );
}

functionHello() {
  functionalertOne() {
    alert("hi from 1");
  }
  window.addEventListener('alert',alertOne);
  return (
    <div><h1>Hello, world! </h1><UpdateButton /></div>
  );
}

functionUpdateButton() {
  functionalertTwo() {
    alert("hi from 2");
  }

  return<buttononClick={alertTwo}> Click Me Inside React</button>;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><buttononclick="window.dispatchEvent(window.alertEvent)">
      Click me outside react
    </button><divid="root"></div>

Solution 3:

Here is an example that I have created where you could pass some values as well using the event publish subscribe pattern in javascript.

https://codesandbox.io/s/react-playground-forked-r7dfn?file=/index.js