Environment Provider

Environment Provider (환경 프로바이더)

iframe, Shadow DOM, 또는 Electron 같은 컴포넌트를 렌더링할 때 사용하는 컴포넌트예요. 커스텀 환경에서 DOM 쿼리가 제대로 동작하도록 올바른 루트 노드나 document를 설정해 줘요.

출처: 문서

본문

내부적으로 Zag.js를 사용하는데, 이는 document.querySelectorAll과 document.getElementById 같은 DOM 쿼리 메서드에 의존해요. iframe, Shadow DOM, Electron 같은 커스텀 환경에서는 이런 메서드가 예상대로 동작하지 않을 수 있어요.

이를 처리하기 위해 Ark UI는 EnvironmentProvider를 포함하며, 이를 통해 적절한 루트 노드나 document를 설정해서 올바른 DOM 쿼리가 되도록 보장할 수 있어요.

사용법 (Usage)

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

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

예제 (Examples)

iframe

react-frame-component를 사용해서 EnvironmentProvider의 값을 iframe 환경으로 설정하는 예시예요.

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

react-shadow를 사용해서 EnvironmentProvider의 값을 Shadow DOM 환경으로 설정하는 예시예요.

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)

useEnvironmentContext 훅을 사용해서 RootNode, Document, Window 컨텍스트에 접근할 수 있어요.

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

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

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

Props

| PropTable (Environment / EnvironmentProvider) |

Environment Provider