Somebody could help me with this idea? I don't know if it were possible or should I use any library or skill.
Component (This is usually and common)
import React, { useState } from "react";
export default function App() {
const [anyVal, setAnyVal] = useState(0);
return (
<div className="App">
<h1>Any Value: {anyVal}</h1>
<button onClick={() => setAnyVal(anyVal + 1)}>Change value</button>
</div>
);
}
Connection HTML + React Dom (This is usually and common)
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
Here the part that I don't know if it were possible
<body>
<div id="root" onanyvaluechanged="externalFn(v)"></div>
<script>
function externalFn(newValue) {
alert("I've detected the change:" + newValue);
}
</script>
</body>
If you are declaring the function in a script tag like that, it exists in the global window scope so you can just call it like this from your react component:
window.externalFn('any value')