Skip to main content
Version: 1.0.2

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​

Installation​

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

Variants​