Environment Provider - Chakra Ui

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

jsx

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

jsx

<EnvironmentProvider></EnvironmentProvider>

Examples

iframe

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

jsx

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

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

Shadow DOM

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

jsx

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}
      >
      </EnvironmentProvider>
    </root.div>
  )
}

Accessing Context

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

jsx

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

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

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

Props