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 Demo Source Code

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')
);