Lynx UI logo
Lynx UI
  • English

      • Dialog

      A headless Dialog (modal) component for ReactLynx. It provides backdrop overlay, open/close state management, and enter/exit animations via Presence.

      The dialog component. Have a customizable background mask layer.

      Basic Usage

      lynx-ui-dialogBasic/index.tsx
      Code
      Preview

      Structure

      <DialogRoot>
  <DialogView>
    <DialogBackdrop />
    <DialogContent />
  </DialogView>
</DialogRoot>

      API

      DialogRoot

      The root component of the Dialog, containing all of its child components.

      debugLog
      iOS
      Android
      Harmony
      Typeboolean
      Display debug logs. Open it when you find a bug.
      defaultShow
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Determines whether the dialog should be shown by default. Use this property means the Dialog is uncontrolled.
      forceMount
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Mount the popper and render the content even when it's not shown. At this time, the internal state is "closed".
      onClose
      iOS
      Android
      Harmony
      Type() => void
      Triggered when the popper is actually closed and the potential animation is finished.
      onOpen
      iOS
      Android
      Harmony
      Type() => void
      Triggered when the popper is actually show and the potential animation is finished.
      onShowChange
      iOS
      Android
      Harmony
      Type(open: boolean) => void
      Triggered when the dialog is about to be closed, which can be triggered by clicking the backdrop or via a close button. In controlled mode (when show is provided), you should use this handler to update the state that controls the dialog's visibility. In uncontrolled mode, this handler is optional and is called before the dialog's internal state is updated.
      show
      iOS
      Android
      Harmony
      Typeboolean
      Whether to show the popper. If this property is not set, the popper will be in controlled mode, meaning the defaultShow property will take no effects. And you have to control behavior of clicking close button and backdrop.
      children
      iOS
      Android
      Harmony
      TypeReactNode | (status: {animating?: boolean, closed?: boolean, entering?: boolean, leaving?: boolean, open?: boolean}) => ReactNode
      children

      State-based styling & rendering

      This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

      • CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
      • Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.
      ui-animating
      Render Propanimating·Typeboolean
      The popper is doing the animations. Takes effect when transition:true. Applied when `status.animating` is true.
      ui-closed
      Render Propclosed·Typeboolean
      The popper is closed. If it's force mounted, the initial status will be closed. Applied when `status.closed` is true.
      ui-entering
      Render Propentering·Typeboolean
      The popper is performing the entering animation. Takes effect when transition:true. Applied when `status.entering` is true.
      ui-leaving
      Render Propleaving·Typeboolean
      The popper is performing the leaving animation. Takes effect when transition:true. Applied when `status.leaving` is true.
      ui-open
      Render Propopen·Typeboolean
      The popper is opened. Applied when `status.open` is true.

      DialogBackdrop

      The backdrop mask of the dialog.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      clickToClose
      iOS
      Android
      Harmony
      Typeboolean·Defaulttrue
      Determines whether clicking on the backdrop closes the dialog. This prop acts as a behavior switch for the backdrop's click event. When true, clicking the backdrop will trigger the onClose callback and close the dialog if the dialog is in uncontrolled mode (when show is not provided). When false, clicking the backdrop will have no effect.
      delayed
      Typeboolean
      If the content needs a delayed first screen to do first render, you need to set this property to true.
      dialogBackdropProps
      iOS
      Android
      Harmony
      TypeViewProps
      DialogBackdrop supports original view props to be directly spread in this prop.
      onClick
      iOS
      Android
      Harmony
      Type() => void
      Triggered when the backdrop is clicked.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'

      DialogView

      View container. When 'container' is set correctly, the underlying layer will be replaced with overlay; otherwise, it will be a regular view. When the underlying layer is overlay, the 'level' property can be used to control the hierarchical relationship. For a regular view, use 'z-index' to control the hierarchical relationship. If this dialog needs to be used outside of LynxView, consider enabling overlay.

      className
      iOS
      Android
      Harmony
      Typestring
      className
      container
      iOS
      Android
      Harmony
      Typestring
      If you want to use the poppers outside of the LynxView, you need to set this property. The value is the name of the native container.
      debugLog
      iOS
      Android
      Harmony
      Typeboolean
      Display debug logs. Open it when you find a bug.
      dialogViewProps
      iOS
      Android
      Harmony
      TypeViewProps | OverlayProps
      Additional props that will be spread to the underlying OverlayView element
      id
      iOS
      Android
      Harmony
      Typestring
      id
      overlayLevel
      iOS
      Android
      Harmony
      Type1 | 2 | 3 | 4
      Only works when the 'container' is set to non-empty string. Adjust nearby elements display level.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'
      children
      iOS
      Android
      Harmony
      TypeReactNode | (status: {open?: boolean, closed?: boolean, leaving?: boolean, entering?: boolean, animating?: boolean}) => ReactNode
      children

      State-based styling & rendering

      This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

      • CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
      • Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.
      ui-open
      Render Propopen·Typeboolean
      The popper is opened. Applied when `status.open` is true.
      ui-closed
      Render Propclosed·Typeboolean
      The popper is closed. If it's force mounted, the initial status will be closed. Applied when `status.closed` is true.
      ui-leaving
      Render Propleaving·Typeboolean
      The popper is performing the leaving animation. Takes effect when transition:true. Applied when `status.leaving` is true.
      ui-entering
      Render Propentering·Typeboolean
      The popper is performing the entering animation. Takes effect when transition:true. Applied when `status.entering` is true.
      ui-animating
      Render Propanimating·Typeboolean
      The popper is doing the animations. Takes effect when transition:true. Applied when `status.animating` is true.

      DialogContent

      The main content of the dialog.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      delayed
      Typeboolean
      If the content needs a delayed first screen to do first render, you need to set this property to true.
      dialogContentProps
      iOS
      Android
      Harmony
      TypeViewProps
      DialogContent supports original view props to be directly spread in this prop.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.