@grownu/magic-modal

A lightweight, customizable modal dialog library for React with animation support and flexible configuration.

Features

• 🎨 Fully customizable animations and styling
• 🎯 Type-safe with TypeScript support
• 🔧 Easy to configure and integrate
• 📦 Minimal bundle size
• ♿ Accessibility-friendly
• 🎭 Multiple animation presets

Installation

npm install @grownu/magic-modal
# or
yarn add @grownu/magic-modal
# or
pnpm add @grownu/magic-modal

Requirements

• React 16.8+
• React DOM 16.8+

Quick Start

1. Wrap your app with MagicModalProvider:

import { MagicModalProvider } from '@grownu/magic-modal'

export default function App() {
  return (
    <MagicModalProvider>
      <YourApp />
    </MagicModalProvider>
  )
}

2. Use the magicModal handler to show modals:

import { magicModal, type ModalProps } from '@grownu/magic-modal'

export const MyComponent = () => {
  const handleOpenModal = () => {
    magicModal.show({
      title: 'Hello World',
      children: <p>This is your content</p>,
      onConfirm: () => {
        console.log('Modal confirmed')
      },
    })
  }

  return <button onClick={handleOpenModal}>Open Modal</button>
}

API

MagicModalProvider

Wrap your application with this provider to enable modal functionality.

<MagicModalProvider>
  <App />
</MagicModalProvider>

useMagicModal

Hook to programmatically control modals.

import { useMagicModal } from '@grownu/magic-modal'

const { show, hide } = useMagicModal()

magicModal

Imperative API for showing/hiding modals.

import { magicModal } from '@grownu/magic-modal'

// Show modal
magicModal.show({
  title: 'Modal Title',
  children: <div>Content</div>,
})

// Hide modal
magicModal.hide()

Types

import type { 
  ModalProps,
  NewConfigProps,
  Direction,
  MagicModalHideReason,
  HideReturn,
  ModalChildren
} from '@grownu/magic-modal'

Configuration

See the constants/defaultConfig.ts for all available configuration options.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.