open-index/open-npm huggingface dataset:
npm package: @juliandevs/magic-modal
Description: A lightweight, customizable modal dialog library for React
Latest version: 1.0.0

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

```bash
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`:

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

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

2. Use the `magicModal` handler to show modals:

```tsx
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.

```tsx
<MagicModalProvider>
  <App />
</MagicModalProvider>
```

### `useMagicModal`

Hook to programmatically control modals.

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

const { show, hide } = useMagicModal()
```

### `magicModal`

Imperative API for showing/hiding modals.

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

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

// Hide modal
magicModal.hide()
```

### Types

```tsx
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.