Skip to main content

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...
<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...
<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

PropertyDescriptionTypeDefault
customDialogsCustom dialogs that can be opened using dialogs methodsRecord<string, ReactNode>{}

Example:

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

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

Methods

dialogs.open(dialogName, options)

ParameterDescriptionTypeDefault
dialogNameThe 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 componentstring
optionsOptions supported by the dialog that you wish to trigger, these options might be different for different dialogsobject{}

Returns object with two properties

NameTypeDescription
closeFunctionCan be called to close the dialog manually
dialogIdnumberCan 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

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