Package Exports

@chakra-ui/react-env
@chakra-ui/react-env/dist/index.cjs.js
@chakra-ui/react-env/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/react-env) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

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.

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>
  )
}

Contribution

Yes please! See the contributing guidelines for details.

Licence

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