@hakuna-matata-ui/react-env

React component and hook for handling window and document object in iframe or
ssr environment

This is an internal utility, not intended for public usage.

Installation

 yarn add @hakuna-matata-ui/react-env
# or
npm i @hakuna-matata-ui/react-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 "@hakuna-matata-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>
  )
}

Contribution

Yes please! See the
contributing guidelines
for details.

Licence

This project is licensed under the terms of the
MIT license.