Dialog Box

Overview

The Dialog Box component provides a flexible way to display modal dialogs with various animations and types. It's built on top of Framer Motion for smooth animations and supports different dialog types like alerts, confirmations, and custom content.

Preview

Preview

Code

import { DialogProvider, useDialog } from './components/ui';
import { Button } from './components/ui';

function Demo() {
  const { openDialog } = useDialog();
  
  return (
    <Button 
      onClick={() => openDialog({
        title: 'Alert',
        content: 'This is an alert dialog.',
        dialogType: 'alert'
      })}
    >
      Show Alert Dialog
    </Button>
  );
}

// In your app:
<DialogProvider>
  <Demo />
</DialogProvider>

Installation

npm

npx @mindfiredigital/ignix-ui add dialog-box

yarn

yarn @mindfiredigital/ignix-ui add dialog-box

pnpm

pnpm @mindfiredigital/ignix-ui add dialog-box

Basic Usage

1. Wrap your app with DialogProvider

import { DialogProvider } from './components/ui';

function App() {
  return (
    <DialogProvider>
      {/* Your app components */}
    </DialogProvider>
  );
}

2. Use the useDialog hook in your components

import { useDialog } from './components/ui';

function MyComponent() {
  const { openDialog } = useDialog();

  const handleClick = () => {
    openDialog({
      title: 'Hello',
      content: 'This is a dialog!',
      dialogType: 'alert'
    });
  };

  return <button onClick={handleClick}>Open Dialog</button>;
}

Dialog Types

The dialog supports several built-in types with different styles:

Variants

Preview

Code

<Button 
  onClick={() => openDialog({
    title: 'Alert',
    content: 'This is an alert dialog.',
    dialogType: 'alert',
    animationKey: 'popIn',
  })}
>
  Show Alert Dialog
</Button>