@saimin/react-modal-manager v1.0.9

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

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