Connect dialog

Use the high-level singleton for the common case:

import { createDomain0Client, domain0 } from 'domain0'

const client = createDomain0Client({
  baseUrl: '/api/domain0/',
  token: accessToken,
})

const controller = await domain0.connectDomain({
  client,
  connectionId,
  applicationName: 'Acme Cloud',
  onSuccess: ({ connection }) => {
    console.log(connection.intent.domain)
  },
})

connectDomain() mounts into document.body, opens immediately, traps focus, restores focus on close, and replaces any previously active singleton flow.

Lifecycle

await domain0.load()
await domain0.connectDomain({ client, connectionId })

domain0.close()   // close the active dialog
domain0.destroy() // close and remove its DOM root

Create an isolated lifecycle when two independent host surfaces must not share the singleton:

import { createDomain0 } from 'domain0'

const domainSetup = createDomain0()
await domainSetup.connectDomain({ client, connectionId, target: container })

Inline presentation

Use the lower-level UI entry point to render inside a surface you own:

import { mountDomain0Connect } from 'domain0/ui'

const controller = mountDomain0Connect({
  target: document.querySelector('#domain-setup')!,
  client,
  connectionId,
  presentation: 'inline',
  triggerHidden: true,
})

await controller.open()

Inline mode has no backdrop, focus trap, or focus stealing.

Lifecycle

Inline presentation

On this page