Add environment component and hook for handling window and document object in iframe or SSR environment

[cheton]

https://github.com/chakra-ui/chakra-ui/tree/main/packages/env

Usage

To get it working, you need to wrap your app in EnvironmentProvider and call the useEnvironment hook anywhere in your app to get access to the correct window and document.

import { EnvironmentProvider } from "@chakra-ui/react-env"

// in your App
const App = ({ children }) => {
  return <EnvironmentProvider>{children}</EnvironmentProvider>
}

// read the environment
const WindowSize = () => {
  const { window } = useEnvironment()
  return (
    <pre>
      {JSON.stringify({
        w: window.innerWidth,
        h: window.innerHeight,
      })}
    </pre>
  )
}

If you wrap specific aspects of your app within an iframe, you'll need to wrap the content in the iframe in EnvironmentProvider to provide the correct window and document to its content.

// in your app
const EmbeddedIFrame = () => {
  return (
    <Frame>
      <EnvironmentProvider>
        <WindowSize />
      </EnvironmentProvider>
    </Frame>
  )
}