71 lines
1.5 KiB
Markdown
71 lines
1.5 KiB
Markdown
|
# @chakra-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
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn add @chakra-ui/react-env
|
||
|
|
# or
|
||
|
|
npm i @chakra-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`.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
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.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
// in your app
|
||
|
|
const EmbeddedIFrame = () => {
|
||
|
|
return (
|
||
|
|
<Frame>
|
||
|
|
<EnvironmentProvider>
|
||
|
|
<WindowSize />
|
||
|
|
</EnvironmentProvider>
|
||
|
|
</Frame>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Contribution
|
||
|
|
|
||
|
|
Yes please! See the
|
||
|
|
[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
|
||
|
|
for details.
|
||
|
|
|
||
|
|
## Licence
|
||
|
|
|
||
|
|
This project is licensed under the terms of the
|
||
|
|
[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).
|