Framer X WindowResizeListener

WindowResizeListener.tsx

// https://framer.slack.com/archives/CB74N2FDY/p1557954143213500?thread_ts=1557952502.211200&cid=CB74N2FDY


import { Override, Data } from "framer"
import * as React from "react"

const initialSize = document.body.getBoundingClientRect()

const preview = Data({ width: initialSize.width, height: initialSize.height })

export function WindowResizeListener(): Override {
    React.useEffect(function() {
        function updateViewSize() {
            const rect = document.body.getBoundingClientRect()
            preview.width = rect.width
            preview.height = rect.height
        }
        window.addEventListener("resize", updateViewSize)
        return function removeListener() {
            window.removeEventListener("resize", updateViewSize)
        }
    })
    return {
        width: preview.width,
        height: preview.height,
    }
}