import * as React from "react"
export function useReportHeight() {
React.useEffect(() => {
// 1. Function to send the current scrollHeight to the Parent (Framer)
const sendHeight = () => {
const height = document.documentElement.scrollHeight
window.parent.postMessage({ type: "reportHeight", height }, "*")
}
// 2. Create an observer to watch for any size changes in the body
const observer = new ResizeObserver(() => {
sendHeight()
})
if (document.body) {
observer.observe(document.body)
}
// 3. Initial call to set the height on first load
sendHeight()
return () => observer.disconnect()
}, [])
}
