Dialog Manager

Code to observe:

• https://github.com/theodorusclarence/dialog-manager/blob/main/src/pages/index.tsx
• https://github.com/theodorusclarence/dialog-manager/blob/main/src/hooks/useDialog.tsx
• https://github.com/theodorusclarence/dialog-manager/blob/main/src/lib/zustand/useDialogStore.tsx
• https://github.com/theodorusclarence/dialog-manager/blob/main/src/components/Layout.tsx
• https://github.com/theodorusclarence/dialog-manager/blob/main/package.json

Key Points

Initialize the store and add the Alert

import * as React from 'react';

import useDialogStore from '@/lib/zustand/useDialogStore';

import Alert from '@/components/Alert';

export default function Layout({ children }: { children: React.ReactNode }) {
  const { open, state, handleClose, handleSubmit } = useDialogStore();

  return (
    <>
      {children}
      <Alert
        onClose={handleClose}
        onSubmit={handleSubmit}
        open={open}
        options={state}
      />
    </>
  );
}

Call the dialog

import useDialog from '@/hooks/useDialog';

const dialog = useDialog();

dialog({
  title: 'Warning!',
  description: (
    <>
      This is a <strong className='text-yellow-600'>warning dialog</strong>.
    </>
  ),
  catchOnCancel: true,
  submitText: 'Okay',
  variant: 'warning',
})
  .then(() => setStatus('Warning Dialog: Submitted'))
  .catch(() => setStatus('Warning Dialog: Rejected'));

If you don't have to catch reject, you can omit catchOnCancel

Attribution

Code is inspired from https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe

Check it out if you prefer to use Context API