@saimin/react-modal-manager/README.md

Centralized react modal manager

# Centralized React Modal Manager

This is a customizable modal component library for React.js. It provides a flexible API to manage and display modals in your application.

## Installation

To install the package, use npm:

```
npm install @saimin/react-modal-manager
```

## Demo

[Demo](https://react-modal-manager-demo.vercel.app/)
[Demo Source Code](https://github.com/MinPyaeKyaw/react-modal-manager-demo)

## Usage

### Import the Modal Provider

Wrap your application with the ModalProvider component to manage modals:

```
import React from 'react';
import ReactDOM from 'react-dom';
import { ModalProvider } from '@saimin/react-modal-manager';

const App = () => {
  return (
    <ModalProvider>
      {/* Your application components */}
    </ModalProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Opening a Modal

Use the useModal hook to access modal management functions. To open a modal, call the open method with a unique ID and modal properties:

```
import React from 'react';
import { useModal } from '@saimin/react-modal-manager';

const MyComponent = () => {
  const { open } = useModal();

  const openMyModal = () => {
    open('my-modal', {
      content: <div>My Modal Content</div>,
      backdropOpacity: 0.5,
      fullscreen: false,
      position: 'center',
      animationType: 'fade',
    });
  };

  return <button onClick={openMyModal}>Open Modal</button>;
};

export default MyComponent;
```

### Closing a Modal

To close a specific modal, use the close method with the modal ID:

```
import React from 'react';
import { useModal } from '@saimin/react-modal-manager';

const MyComponent = () => {
  const { close } = useModal();

  const closeMyModal = () => {
    close('my-modal');
  };

  return <button onClick={closeMyModal}>Close Modal</button>;
};

export default MyComponent;
```

You can also close all open modals at once:

```
const { closeAll } = useModal();
closeAll();
```

### Applying props to all modals

To apply props to all modal, add config prop to ModalProvider.

```
<ModalProvider config={{
  animationType: "zoom"
}}>
  ...children nodes
</ModalProvider>
```

## Modal Props

The ModalProps object allows you to customize the appearance and behavior of your modal. Here are the available options:

### ModalProps

| Prop                    | Type                                                                                                                                           | Description                                               |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **content**             | `ReactNode`                                                                                                                                    | The content to be displayed inside the modal.             |
| **backdropOpacity**     | `number`                                                                                                                                       | The opacity of the backdrop.                              |
| **backdropColor**       | `string`                                                                                                                                       | The color of the backdrop.                                |
| **backdropPadding**     | `string` \| `number`                                                                                                                           | Padding around the modal content.                         |
| **fullscreen**          | `boolean`                                                                                                                                      | Whether the modal should cover the entire screen.         |
| **position**            | `center` \| `center-left` \| `center-right` \| `top-center` \| `top-left` \| `top-right` \| `bottom-center` \| `bottom-left` \| `bottom-right` | Position of the modal on the screen.                      |
| **hideOnClickBackDrop** | `boolean`                                                                                                                                      | Whether to close the modal when clicking on the backdrop. |
| **animationType**       | `fade` \| `zoom` \| `slide-from-top` \| `slide-from-bottom` \| `slide-from-right` \| `slide-from-left`                                         | The animation type for modal entrance and exit.           |

## Example

Here is a complete example of using the modal component:

```
import React from 'react';
import ReactDOM from 'react-dom';
import { ModalProvider, useModal } from '@saimin/react-modal-manager';

const MyApp = () => {
  const { open } = useModal();

  const showModal = () => {
    open('example-modal', {
      content: <div>Example Modal Content</div>,
      fullscreen: false,
      animationType: 'zoom',
    });
  };

  return <button onClick={showModal}>Show Modal</button>;
};

ReactDOM.render(
  <ModalProvider>
    <MyApp />
  </ModalProvider>,
  document.getElementById('root')
);

```