Environment Provider

We use Zag.js internally, which relies on DOM query methods like document.querySelectorAll and document.getElementById. In custom environments like iframes, Shadow DOM, or Electron, these methods might not work as expected.

To handle this, Ark UI includes the EnvironmentProvider, allowing you to set the appropriate root node or document, ensuring correct DOM queries.

Usage

import { EnvironmentProvider } from "@chakra-ui/react"

<EnvironmentProvider>{/* Your App */}</EnvironmentProvider>

Examples

iframe

Here's an example that uses react-frame-component to set the EnvironmentProvider's value with the iframe environment.

import { EnvironmentProvider } from "@chakra-ui/react"
import Frame, { FrameContextConsumer } from "react-frame-component"

export const Demo = () => (
  <Frame>
    <FrameContextConsumer>
      {({ document }) => (
        <EnvironmentProvider value={() => document}>
          {/* Your App */}
        </EnvironmentProvider>
      )}
    </FrameContextConsumer>
  </Frame>
)

Shadow DOM

Here's an example that uses react-shadow to set the EnvironmentProvider's value with Shadow DOM environment.

import { EnvironmentProvider } from "@chakra-ui/react"
import { useRef } from "react"
import root from "react-shadow"

export const Demo = () => {
  const portalRef = useRef()
  return (
    <root.div ref={portalRef}>
      <EnvironmentProvider
        value={() => portalRef?.current?.shadowRoot ?? document}
      >
        {/* Your App */}
      </EnvironmentProvider>
    </root.div>
  )
}

Accessing Context

Use the useEnvironmentContext hook to access the RootNode, Document, and Window context.

import { useEnvironmentContext } from "@chakra-ui/react"

export const Demo = () => {
  const { getRootNode } = useEnvironmentContext()

  return <pre>{JSON.stringify(getRootNode(), null, 2)}</pre>
}

Props