Expose a useDialogContext hook to dialog components (#174)

Co-authored-by: Alex Nicholson <alex.n@clove.kitchen>

Author: a16n-dev

docs/blog/2025-08-25-release-2-5-0.md

@@ -0,0 +1,16 @@
+---
+title: V2.5.0 has been released
+description: Release notes for version 2.5.0
+tags: [Release, Minor Release]
+---
+
+Version 2.5.0 for React Dialog Async has been released 🎉
+<!-- truncate -->
+
+## What's new?
+* Dialogs are now wrapped in a provider that exposes all of the props passed to the dialog component via react context. Call `useDialogContext` from a component inside a dialog to access all the dialog props such as `open`, `data`, and `handleClose`. [Read more about `useDialogContext`](/API/use-dialog-context).
+
+---
+
+Feedback or ideas? We'd love to hear them! Open an issue over on [GitHub](https://github.com/a16n-dev/react-dialog-async/issues).
+

docs/docs/API/use-dialog-context.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 3
+---
+
+# useDialogContext
+```tsx
+import { useDialogContext } from 'react-dialog-async';
+```
+A hook that can be called from within a dialog component to access that dialog's state.
+
+:::note
+Calling `useDialogContext` outside of a dialog component **will not throw an error**. This is an intentional design decision to allow for more flexible components. Instead check the value of `isInsideDialogContext` to determine if the hook is being called within a dialog.
+:::

docs/docs/API/use-dialog.md

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# UseDialog
+# useDialog
 ```tsx
 import { useDialog } from 'react-dialog-async';
 ```

packages/react-dialog-async/package.json

@@ -2,7 +2,7 @@
   "name": "react-dialog-async",
   "description": "A promise-based way to show dialogs in React",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "sideEffects": false,
   "main": "index.js",
   "module": "index.esm.js",

packages/react-dialog-async/src/DialogContext.tsx

@@ -4,6 +4,7 @@ import { DialogComponent } from './types';
 export interface dialogContextState {
   show: (
     dialogId: string,
+    hash: number,
     dialog: DialogComponent<any, any>,
     data: unknown,
     unmountDelay?: number,

packages/react-dialog-async/src/DialogProvider/DialogProvider.test.tsx

@@ -39,7 +39,7 @@ test('calling  show() mounts the dialog in the DOM', () => {
     const id = useId();
 
     useEffect(() => {
-      ctx.show(id, TestDialog, {});
+      ctx.show(id, 0, TestDialog, {});
     }, [id]);
 
     return null;
@@ -61,7 +61,7 @@ test('calling register() followed by show() followed by hide() unmounts the dial
     const id = useId();
 
     useEffect(() => {
-      ctx.show(id, TestDialog, {});
+      ctx.show(id, 0, TestDialog, {});
 
       ctx.hide(id);
     }, [id]);

packages/react-dialog-async/src/DialogProvider/DialogProvider.tsx

@@ -61,6 +61,7 @@ const DialogProvider = ({
   const show = useCallback(
     (
       id: string,
+      hash: number,
       dialog: DialogComponent<any, any>,
       data: unknown,
       unmountDelay?: number,
@@ -83,6 +84,7 @@ const DialogProvider = ({
           [id]: {
             dialog: dialog,
             open: true,
+            hash,
             data,
             resolve: resolveFn,
             unmountDelay: unmountDelay ?? defaultUnmountDelayInMs,

packages/react-dialog-async/src/DialogStateContext.tsx

@@ -5,6 +5,7 @@ export type dialogsStateData = Record<
   string,
   {
     dialog: DialogComponent<any, any>;
+    hash: number;
     data: unknown;
     open: boolean;
     resolve?: (value?: unknown) => void;

packages/react-dialog-async/src/IndividualDialogContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+import { AsyncDialogProps } from './types';
+
+interface DialogContextValue<D = any, R = any> extends AsyncDialogProps<D, R> {
+  isInsideDialogContext: boolean;
+}
+
+const defaultDialogContextValue: DialogContextValue = {
+  open: false,
+  focused: false,
+  mounted: true,
+  handleClose: () => {},
+  data: undefined,
+  isInsideDialogContext: false,
+};
+
+const IndividualDialogContext = createContext<DialogContextValue>(
+  defaultDialogContextValue,
+);
+
+export const useDialogContext = <D = any, R = any>(): DialogContextValue<D, R> => {
+  return useContext(IndividualDialogContext);
+};
+
+export default IndividualDialogContext;

packages/react-dialog-async/src/index.ts

@@ -1,4 +1,5 @@
 export { default as DialogProvider } from './DialogProvider/DialogProvider';
 export { default as DialogOutlet } from './DialogOutlet';
 export { default as useDialog } from './useDialog';
+export { useDialogContext } from './IndividualDialogContext';
 export { type AsyncDialogProps } from './types';