cal.pub0.org/packages/embeds/embed-react/inline.tsx

68 lines
1.6 KiB
TypeScript
Raw Normal View History

import * as React from "react";
import { useEffect } from "react";
import { useState } from "react";
2022-03-31 08:45:47 +00:00
import ReactDom from "react-dom";
import Cal, { getCalApi } from "./src/index";
const api = getCalApi();
2022-03-31 08:45:47 +00:00
function App() {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
// Simulate state change causing config object to change, causing rerender of Cal
setTimeout(setLoaded.bind(true), 1000);
const callback = (event) => {
console.log(event.detail);
};
api.then((api) => {
api("on", {
action: "*",
callback,
});
api("ui", {
cssVarsPerTheme: {
light: {
"cal-border-booker": "red",
"cal-border-booker-width": "20px",
},
dark: {
"cal-border-booker": "red",
"cal-border-booker-width": "5px",
},
},
});
});
return () => {
api.then((api) => {
api("off", {
action: "*",
callback,
});
});
};
}, []);
2022-03-31 08:45:47 +00:00
return (
<>
<h1>
There is <code>Cal</code> component below me
</h1>
<Cal
calOrigin="http://localhost:3000"
embedJsUrl="//localhost:3000/embed/embed.js"
style={{ width: "100%", height: "100%", overflow: "scroll" }}
2022-03-31 08:45:47 +00:00
calLink="pro"
config={{
name: "John Doe",
email: "johndoe@gmail.com",
notes: "Test Meeting",
guests: ["janedoe@gmail.com"],
theme: "dark",
}}
/>
2022-03-31 08:45:47 +00:00
</>
);
}
ReactDom.render(<App />, document.getElementById("root"));