DialogsManager

A comprehensive dialog management system that provides programmatic access to open, close, and manage multiple dialogs.

Import

import { DialogsManager, dialogs } from "@sparrowengg/twigs-react";

Usage

Add DialogsManager to a top level component like App as shown below:

import { DialogsManager } from "@sparrowengg/twigs-react";

function App() {
  return (
    <Main>
      <YourApp />
      <DialogsManager />
    </Main>
  );
}

And now you can call dialogs.open or dialogs.push to open new dialogs.

Methods

dialogs.open(dialogName, options)

Prop	Type	Default
`dialogName?`	`string`	-
`options?`	`object`	`{}`

Returns object with two properties:

Prop	Type	Default
`close?`	`Function`	-
`dialogId?`	`number`	-

dialogs.push(dialogName, options)

The parameters and return types are same as that of dialogs.open, the only difference is that push doesn't close existing modals.

dialogs.close(dialogId)

Used to close a particular dialog.

dialogs.closeAll()

Used to close all open dialogs.

Props

DialogsManager

Prop	Type	Default
`customDialogs?`	`Record<string, (props: { onClose: () => void; [x: string]: any }) => ReactNode>`	`{}`

Default Dialogs Props

Alert

Prop	Type	Default
`title?`	`ReactNode`	`null`
`content?`	`ReactNode`	`null`
`labels?`	`{ action: string }`	`{ action: 'Close' }`
`actionButtonProps?`	`ButtonProps`	`{}`
`closeButton?`	`ReactNode`	`ReactNode`
`css?`	`CSS`	`{}`
`closeOnPrimaryAction?`	`boolean`	`true`
`onPrimaryAction?`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	`undefined`
`onClose?`	`() => void`	`undefined`

Confirm

Prop	Type	Default
`title?`	`ReactNode`	`null`
`content?`	`ReactNode`	`null`
`labels?`	`{ confirm: string; cancel: string }`	`{ confirm: 'Confirm', cancel: 'Cancel' }`
`confirmButtonProps?`	`ButtonProps`	`{}`
`cancelButtonProps?`	`ButtonProps`	`{}`
`closeButton?`	`ReactNode`	`ReactNode`
`closeOnConfirm?`	`boolean`	`true`
`closeOnCancel?`	`boolean`	`true`
`onConfirm?`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	`undefined`
`onCancel?`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	`undefined`
`onClose?`	`() => void`	`undefined`
`css?`	`CSS`	`{}`

Prop	Type	Default
`title?`	`ReactNode`	`null`
`content?`	`ReactNode`	`null`
`footer?`	`ReactNode`	`ReactNode`
`children?`	`ReactNode`	`ReactNode`
`labels?`	`{ action: string }`	`{ action: 'Close' }`
`actionButtonProps?`	`ButtonProps`	`{}`
`closeButton?`	`ReactNode`	`ReactNode`
`css?`	`CSS`	`{}`
`closeOnPrimaryAction?`	`boolean`	`true`
`onPrimaryAction?`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	`undefined`
`onClose?`	`() => void`	`undefined`
`size?`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`

Typesafe Options

When creating custom dialogs, you can ensure type safety to dialogs.open and dialogs.push by overriding the DialogOptionsOverride interface as shown below:

declare module "@sparrowengg/twigs-react" {
  export interface DialogOptionsOverride {
    deleteModal: {
      title: string;
      onDelete: () => void;
    };
  }
}

DialogsManager

On this page