Environment

Set up components for custom environments like iframes, Shadow DOM, or Electron.

Motivation

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.

Setup

To support custom environments like an iframe, Shadow DOM or Electron, render the EnvironmentProvider component to provide the environment context to all Ark UI components.

import { EnvironmentProvider } from 'ark-ripple/environment';

export component Setup() {
  <iframe title="IFrame Context">
    <EnvironmentProvider>{'/* Your App */'}</EnvironmentProvider>
  </iframe>
}

Usage in iframe and shadow dom

The EnvironmentProvider component will automatically detect the current environment and set the correct environment context.

Context

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

import { useEnvironmentContext } from 'ark-ripple/environment';

export component Usage() {
  const environment = useEnvironmentContext();

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

API Reference

EnvironmentProvider