useIframeMessageListener() — ui Function Reference

Architecture documentation for the useIframeMessageListener() function in use-iframe-sync.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog calls 1

Entity Profile

DocumentationAtlas→ Changelog→ useIframeMessageListener() — ui Function Reference

Dependency Diagram

graph TD
  ab28371f_04be_dacf_4bd0_4970453ca87f["useIframeMessageListener()"]
  6df3b824_805c_9704_1ce4_b3b332c22d53["use-iframe-sync.tsx"]
  ab28371f_04be_dacf_4bd0_4970453ca87f -->|defined in| 6df3b824_805c_9704_1ce4_b3b332c22d53
  02317304_c79d_4665_09f7_3c5ca7424acf["isInIframe()"]
  ab28371f_04be_dacf_4bd0_4970453ca87f -->|calls| 02317304_c79d_4665_09f7_3c5ca7424acf
  style ab28371f_04be_dacf_4bd0_4970453ca87f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/hooks/use-iframe-sync.tsx lines 19–42

export function useIframeMessageListener<
  Message extends ParentToIframeMessage,
  MessageType extends Message["type"],
>(
  messageType: MessageType,
  onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
) {
  React.useEffect(() => {
    if (!isInIframe()) {
      return
    }

    const handleMessage = (event: MessageEvent) => {
      if (event.data.type === messageType) {
        onMessage(event.data.data)
      }
    }

    window.addEventListener("message", handleMessage)
    return () => {
      window.removeEventListener("message", handleMessage)
    }
  }, [messageType, onMessage])
}