@printloop/frame-sync/dist/frame-sync.d.ts

Minimal iframe synchronization for React with Zod validation

import * as react from 'react';
import { z } from 'zod';

type ZodProps<T extends z.Schema<unknown>> = z.util.flatten<z.infer<T>> & {
    /**
     * When the props change in the guest frame, this function will be called with the new props for the host frame.
     */
    onPropsChange?: (value: z.infer<T>) => void;
};
type HostFrameProps<T extends z.Schema<unknown>> = React.IframeHTMLAttributes<HTMLIFrameElement> & ZodProps<T>;
type GuestFrameOptions<T extends z.Schema<unknown>> = {
    src: string;
    schema: T;
    targetOrigin?: string;
};
declare function getGuestFrame<T extends z.Schema<unknown>>({ src, schema, targetOrigin, }: GuestFrameOptions<T>): react.ForwardRefExoticComponent<react.PropsWithoutRef<HostFrameProps<T>> & react.RefAttributes<HTMLIFrameElement>>;
type HostFrameOptions<T extends z.Schema<unknown>> = {
    schema: T;
    initial: z.infer<T>;
    targetOrigin?: string;
};
declare const getHost: <T extends z.ZodType<unknown, z.ZodTypeDef, unknown>>({ schema, initial, targetOrigin, }: HostFrameOptions<T>) => {
    useHostProps(): z.TypeOf<T>;
    dispatchChange(value: z.TypeOf<T>): void;
};

export { getGuestFrame, getHost };