A minimal iframe synchronization library for React with runtime type checking via Zod.
NOTE I thought about this API for half a second, so it's probably not the best. I haven't even written tests for it yet. Use at your own risk.
npm install --save @printloop/frame-sync- Create a Zod schema for the data you want to pass to the guest
- Create a
GuestFramecomponent with the schema and the URL of the guest - Pass the data to the
GuestFramecomponent as props
import { z } from 'zod';
import { getGuestFrame } from '@printloop/frame-sync';
const schema = z.object({
name: z.string(),
age: z.number(),
email: z.string().optional(),
});
const GuestFrame = getGuestFrame({
schema,
// the URL of the guest
src: "https://guest-url.com/path/to/page",
// the origin of the guest
targetOrigin: "https://guest-url.com",
});
<GuestFrame name="Randall" age={50} email="randall@printloop.dev" />;- Create a Zod schema for the data you expect to receive from the host
- Create a
Hostobject with the schema, the origin of the host, and initial state to use before the host sends data - Consume the data from the
HostthroughuseHostProps
import { z } from 'zod';
import { getHost } from '@printloop/frame-sync';
const schema = z.object({
name: z.string(),
age: z.number(),
email: z.string().optional(),
});
const { useHostProps } = getHost({
schema,
// the origin of the host
origin: "http://host-url.com",
// initial state to use before the host sends data
initialState: {
name: "Alex",
age: 50,
email: "alex@example.com"
}
});
export function SomeGuestComponent () {
const { name, age, email } = useHostProps(Host.Context);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
<p>Email: {email}</p>
</div>
);
}© 2023 Kristian Muñiz