Penpal on React
npm install react-penpalts
import { AsyncMethodReturns } from "penpal/lib/types";
import React, { useEffect, useLayoutEffect, useState } from "react";
import reactDOM from "react-dom";
import { Penpal } from "react-penpal";
function App() {
const [child, setChild] = useState>(null);
const [string, setString] = useState("");
useEffect(() => {
if(child) {
child.hi("HIHIHIHI");
}
}, [child]);
return (
src="./child.html"
width={300}
height={300}
setChild={setChild}
methods={{
hello(string : string) {
setString(string);
}
}}
style={{
border: "0",
display: "block"
}}
/>
{string}
);
}
const main = document.getElementById("main");
reactDOM.render( , main);
`
child
`ts
import { connectToParent } from "penpal";
(async () => {
const connection = connectToParent({
methods: {
hi(string : string) {
document.body.appendChild(document.createElement("br"));
document.body.appendChild(new Text(string));
}
}
});
const parent = await connection.promise;
document.body.appendChild(new Text("HELLO WORLD SENDED"));
parent.hello("HELLO WORLD");
})();
``