https://github.com/theodorusclarence/dialog-manager

💬 Dialog Manager using TypeScript, Zustand with Immer, and Tailwind CSS
https://github.com/theodorusclarence/dialog-manager

nextjs tailwindcss typescript zustand

Last synced: 26 days ago
JSON representation

💬 Dialog Manager using TypeScript, Zustand with Immer, and Tailwind CSS

• Host: GitHub
• URL: https://github.com/theodorusclarence/dialog-manager
• Owner: theodorusclarence
• Created: 2021-10-10T12:23:13.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-10T14:51:57.000Z (about 3 years ago)
• Last Synced: 2024-10-01T00:43:18.141Z (about 1 month ago)
• Topics: nextjs, tailwindcss, typescript, zustand
• Language: TypeScript
• Homepage: https://dialog.thcl.dev/
• Size: 439 KB
• Stars: 25
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dialog Manager

![ts-nextjs-tailwind-starter](https://socialify.git.ci/theodorusclarence/dialog-manager/image?description=1&language=1&owner=1&pattern=Charlie%20Brown&stargazers=1&theme=Dark)

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

```tsx

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}

      

    >

  );

}

```

### Call the dialog

```tsx

import useDialog from '@/hooks/useDialog';

const dialog = useDialog();

dialog({

  title: 'Warning!',

  description: (

    <>

      This is a warning dialog.

    >

  ),

  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