react-penpal

Penpal on React

Example

parent
``ts
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");
})();
``