teste-ui@teste-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 @teste-ui/react-env
# or
npm i @teste-ui/react-envUsage
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 "@teste-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.