Environment

EnvironmentProvider tells Destyler components which root node, document, and window to use. A normal application can rely on the default document; add the provider when components render in a shadow root, iframe, or another DOM environment.

Import

<script setup lang="ts">
import { EnvironmentProvider, useEnvironmentContext } from '@destyler-ui/vue'
</script>

import { EnvironmentProvider, useEnvironmentContext } from '@destyler-ui/react'

import { EnvironmentProvider, useEnvironmentContext } from '@destyler-ui/solid'

<script lang="ts">
  import { EnvironmentProvider, useEnvironmentContext } from '@destyler-ui/svelte/environment'
</script>

The Svelte exports are also available from @destyler-ui/svelte.

Basic usage

<script setup lang="ts">
import { EnvironmentProvider } from '@destyler-ui/vue'
</script>

<template>
  <EnvironmentProvider>
    <button type="button">Rendered in the current document</button>
  </EnvironmentProvider>
</template>

import { EnvironmentProvider } from '@destyler-ui/react'

export function Example() {
  return (
    <EnvironmentProvider>
      <button type="button">Rendered in the current document</button>
    </EnvironmentProvider>
  )
}

import { EnvironmentProvider } from '@destyler-ui/solid'

export function Example() {
  return (
    <EnvironmentProvider>
      <button type="button">Rendered in the current document</button>
    </EnvironmentProvider>
  )
}

<script lang="ts">
  import { EnvironmentProvider } from '@destyler-ui/svelte/environment'
</script>

<EnvironmentProvider>
  <button type="button">Rendered in the current document</button>
</EnvironmentProvider>

Pass value when the content belongs to another root. The value may be a Document, ShadowRoot, another DOM Node, or a function that resolves one lazily.

API

EnvironmentProvider

Prop	Type	Default	Description
value	RootNode | () => RootNode	Current or parent document	Root node used to resolve the document and window.
children	Snippet	—	Content that receives the environment context.

RootNode is ShadowRoot | Document | Node.

useEnvironmentContext

Reads getRootNode(), getDocument(), and getWindow() from the nearest provider. Solid and Svelte return accessors; React and Vue return the context value directly.

<script setup lang="ts">
import { useEnvironmentContext } from '@destyler-ui/vue'

const environment = useEnvironmentContext()
</script>

<template>
  <button type="button" @click="environment.getWindow().scrollTo(0, 0)">
    Scroll this environment to the top
  </button>
</template>

import { useEnvironmentContext } from '@destyler-ui/react'

export function ScrollToTop() {
  const environment = useEnvironmentContext()
  return <button onClick={() => environment.getWindow().scrollTo(0, 0)}>Scroll this environment to the top</button>
}

import { useEnvironmentContext } from '@destyler-ui/solid'

export function ScrollToTop() {
  const environment = useEnvironmentContext()
  return <button onClick={() => environment().getWindow().scrollTo(0, 0)}>Scroll this environment to the top</button>
}

<script lang="ts">
  import { useEnvironmentContext } from '@destyler-ui/svelte/environment'

  const environment = useEnvironmentContext()
</script>

<button type="button" onclick={() => environment().getWindow().scrollTo(0, 0)}>
  Scroll this environment to the top
</button>