react-ramin-modal

react-ramin-modal

A lightweight and flexible modal system for React that supports stacked modal content and dynamic rendering. Easily open modals with any content — React components, HTML elements, or plain text — and manage multiple layers using a content stack.

📦 Installation

npm install react-ramin-modal
# or
yarn add react-ramin-modal

```jsx
import React from "react";
import {
  ModalProvider,
  GeneralModal,
} from "react-ramin-modal";

function App() {

# destruct the openModal and closeModal from useModal hook
const {  openModal,closeModal}=useModal();

  const handleOpen = () => {
    openModal(<div>This is a modal!</div>);
  };

  return (
    <ModalProvider>
      <button onClick={handleOpen}>Open Modal</button>
      <GeneralModal />
    </ModalProvider>
  );
}

export default App;



🧠 How It Works
ModalProvider: Wraps your app to enable modal state management.

GeneralModal: Renders modal content based on what's in the stack.

openModal(content): Opens a modal with the given content:

React component

JSX/HTML element

String

closeModal(): Closes the most recent modal content (last in the stack).

contentStack: An array of modal content currently in the stack.

open: Boolean flag indicating if the modal is currently visible.

openModal(<div>First Modal</div>);
openModal(<div>Second Modal</div>);
openModal(<div>Third Modal</div>);

// Then closeModal() will remove them one by one (LIFO order)


| Item            | Type      | Description                     |
| --------------- | --------- | ------------------------------- |
| `ModalProvider` | Component | Wraps the app, provides context |
| `GeneralModal`  | Component | Renders modal content

and you can use this for controlling  your  modal:
 const {openModal, closeModal, open, contentStack}=useModal();

| `openModal()`   | Function  | Opens modal with given content  |
| `closeModal()`  | Function  | Closes the most recent modal    |
| `open`          | boolean   | Whether the modal is open       |
| `contentStack`  | array     | The stack of modal contents     |


```jsx
const MyModalContent = () => (
  <div>
    <h2>Hello!</h2>
    <button onClick={closeModal}>Close</button>
  </div>
);

// Somewhere in your app:
openModal(<MyModalContent />);