@chakra-ui/反应-env

在 iframe 中处理窗口和文档对象的响应组件和钩子 ssr 环境

这是内部用途,并非供公众使用.

安装

yarn add @chakra-ui/react-env
# or
npm i @chakra-ui/react-env

使用量

要让它工作,你需要包装你的应用程序 EnvironmentProvider 打电话 页:1 useEnvironment 在应用程序的任何地方勾钩 以获取正确的 window 财务报告和审定财务报表 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>
  )
}

如果您将您的应用程序的特定方面包在一个 iframe你需要包装 框中的内容 EnvironmentProvider 提供正确的 window 财务报告和审定财务报表 document 它的内容.

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

捐款

是的,请! 见 提供指南 详细情况.

许可证

本项目的许可条件如下: 麻省理工学院许可证。 。 。 .