werkbank
    Preparing search index...

    Function Dialog

    • A responsive, accessible Dialog component built on top of the native HTML <dialog> element.

      Parameters

      • props: DialogProps

        The properties for the Dialog component.

      Returns Element

      A JSX element representing the Dialog.

      Features:

      • Native <dialog> implementation for accessibility.
      • Automatic focus trapping using useFocusTrap.
      • Body scroll prevention using usePreventScroll.
      • Backdrop click-to-close functionality.
      • Support for entry and exit animations.
      const [isOpen, setIsOpen] = useState(false);

      return (
        <>
          <button onClick={() => setIsOpen(true)}>Open Dialog</button>
          <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
            <h2>Welcome</h2>
            <p>This is a native dialog.</p>
            <button onClick={() => setIsOpen(false)}>Close</button>
          </Dialog>
        </>
      );

      <Dialog
        open={isOpen}
        enterAnimation="slide-up 0.3s ease-out"
        exitAnimation="slide-down 0.2s ease-in"
        onClose={handleClose}
      >
        <p>Animated content</p>
      </Dialog>

    Settings

    Member Visibility

    On This Page

    Basic UsageWith Animations