Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Hooks
useDialog
useDeviceInfo

Retrieves information about the current device and environment.

useDidUpdate

Triggers effects after updates, skipping the initial mount.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

useDialog

A hook for managing dialog states and behaviors, including open, close, and toggle logic.

API References

Props API

Props APITypeDefaultAnnotation
keepMounted?boolean``If set element will not be unmounted from the DOM when it is hidden, display: none styles will be applied instead
transition?Transition``Transition name or object
duration?number250Transition duration in ms
exitDuration?number250Exit transition duration in ms
timingFunction?stringtheme.transitionTimingFunctionTransition timing function
mounted?boolean``Determines whether component should be mounted to the DOM
children?(styles: CSSProperties) => React.JSX.Element``Render function with transition styles argument
onExited?() => void``Called when exit transition ends
onExit?() => void``Called when exit transition starts
onEnter?() => void``Called when enter transition starts
onEntered?() => void``Called when enter transition ends
enterDelay?number``Delay in ms before enter transition starts
exitDelay?number``Delay in ms before exit transition starts

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-dialog.ts