DialogsManager

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.

Result

Loading...

Live EditorOpen in playground

<div>
  <Button
    onClick={() => {
      dialogs.open("confirm", {
        title: "Are you sure you want to perform this action",
        content: "You can perform this action again.",
        labels: {
          confirm: "Yes, I am sure",
          cancel: "Cancel",
        },
        confirmButtonProps: {
          color: "error",
        },
      });
    }}
  >
    Open Dialog
  </Button>
  <DialogsManager />
</div>

Open modals

Result

Loading...

Live EditorOpen in playground

<div>
  <Button
    onClick={() => {
      const { close } = dialogs.open("modal", {
        size: 'sm',
        children: (
          <div>
            <h3>This is a custom modal</h3>
            <Button
              css={{
                marginTop: "$3",
              }}
              size="lg"
              color="error"
              onClick={() => close()}
            >
              Close
            </Button>
          </div>
        ),
      });
    }}
  >
    Open Dialog
  </Button>
  <DialogsManager />
</div>

Props

Property	Description	Type	Default
customDialogs	Custom dialogs that can be opened using dialogs methods	Record<string, ReactNode>	{}

Example:

<DialogsManager
  customDialogs={{
    deleteModal: DeleteModal,
  }}
/>;

const DeleteModal = ({ title, onDelete }) => {
  return <Modal defaultOpen>{/* Content */}</Modal>;
};

Methods

dialogs.open(dialogName, options)

Parameter	Description	Type	Default
dialogName	The dialog that should be opened. Three dialogs are included by default - alert, confirm and modal. You can replace these dialogs or add new ones by using the customDialogs property in the Dialogs component	string
options	Options supported by the dialog that you wish to trigger, these options might be different for different dialogs	object	{}

Returns object with two properties

Name	Type	Description
close	Function	Can be called to close the dialog manually
dialogId	number	Can be used to close the dialog using dialogs.close

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

Default dialogs props

Alert

Property	Description	Type	Default
title	Title of the dialog	ReactNode	null
content	Content shown inside the dialog	ReactNode	null
labels	Labels for the buttons	{ action: string }	{ action: "Close" }
actionButtonProps	Props for the action button	ButtonProps	{}
closeButton	Close button shown on the top right corner	ReactNode	ReactNode
css	Custom styles to be applied on the content	CSS	{}
closeOnPrimaryAction	Close the dialog when action button is clicked	boolean	true
onPrimaryAction	Callback when action button is clicked	(e: React.MouseEvent<HTMLButtonElement>) => void	undefined
onClose	Callback when dialog is closed	() => void	undefined

Confirm

Property	Description	Type	Default
title	Title of the dialog	ReactNode	null
content	Content shown inside the dialog	ReactNode	null
labels	Labels for the buttons	{ confirm: string; cancel: string }	{ confirm: "Confirm", cancel: "Cancel" }
confirmButtonProps	Props for the confirm button	ButtonProps	{}
cancelButtonProps	Props for the cancel button	ButtonProps	{}
closeButton	Close button shown on the top right corner	ReactNode	ReactNode
css	Custom styles to be applied on the content	CSS	{}
closeOnConfirm	Close the dialog when confirm button is clicked	boolean	true
closeOnCancel	Close the dialog when cancel button is clicked	boolean	true
onConfirm	Callback when confirm button is clicked	(e: React.MouseEvent<HTMLButtonElement>) => void	undefined
onCancel	Callback when cancel button is clicked	(e: React.MouseEvent<HTMLButtonElement>) => void	undefined
onClose	Callback when dialog is closed	() => void	undefined

Modal

Property	Description	Type	Default
title	Title of the dialog	ReactNode	null
content	Content shown inside the dialog	ReactNode	null
footer	Dialog footer	ReactNode	ReactNode
children	If provided, completely override the content of the dialog, ignoring all the other props like title, content and footer	ReactNode	ReactNode
labels	Labels for the buttons	{ action: string }	{ action: "Close" }
actionButtonProps	Props for the action button	ButtonProps	{}
closeButton	Close button shown on the top right corner	ReactNode	ReactNode
css	Custom styles to be applied on the content	CSS	{}
closeOnPrimaryAction	Close the dialog when action button is clicked	boolean	true
onPrimaryAction	Callback when action button is clicked	(e: React.MouseEvent<HTMLButtonElement>) => void	undefined
onClose	Callback when dialog is closed	() => void	undefined

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;
    };
  }
}