Usage in Managing Multiple Modals, Popups, Notifications
This package simplifies the management of multiple modals, popups, notifications, and similar UI elements within a project. It achieves this by leveraging events, maintaining a centralized list of modals, and assigning actions to them.
npm install @4i/modal-manager
Method | Description |
---|---|
call(action, props) | Call a modal by its action name and pass props to it. |
close('all') | Close all modals. |
close(-1) | Close last modals. |
close(0) | Close first modals. |
close() | Close last modals. (default) |
onOpenModalState(callback) | Is there at least one window open now |
addEventListener(event, callback) | Add an event listener to the modal manager. |
removeEventListener(event, callback) | Remove an event listener from the modal manager. |
Prop | Type | Description |
---|---|---|
modalList | Object | An object containing modal actions as keys and modal components as values. |
className | string | |
isOverflow | boolean | Set "overflow: hidden" on body |
onModalStateChange | function | Callback function that is called when modal state changes. |
In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
export const modalAction = {
MODAL_PROMPT: "modal-prompt",
// Additional modal actions...
};
Create a list of modals in the list object, where keys are modal actions, and values are the corresponding modal components.
const list = {
[modalAction.MODAL_PROMPT]: ModalPrompts,
// Additional modals...
};
Call modals in your components by invoking modal.call with the desired modal action.
modal.call(modalAction.MODAL_PROMPT, {
// Recieve props in your modal component
title: "Modal title",
content: "Modal content",
});
If desired, you can inherit from the Manager class to create your own classes for handling custom notifications, popups, and more. And then pass your custom class to the CustomProvider component using ModalProvider as an example
import { Manager } from "@4i/modal-manager";
import { Manager } from "@4i/modal-manager";
import { v4 as uuidv4 } from "uuid";
export const constants = {
OPEN: "open-bottom-modal",
CLOSE: "close-bottom-modal",
};
class CustomModalManager extends Manager {
name: string;
data: any;
constructor() {
super();
this.name = "";
this.data = {};
}
create(name: string, data) {
this.name = name;
this.data = data;
this.emitter.emit(constants.OPEN, this.name, this.data);
}
call(name: string, data: any = {}) {
this.create(name, { modalId: uuidv4(), data });
}
close(position?: number | string) {
this.emitter.emit(constants.CLOSE, position);
}
}
const customModalManager = new CustomModalManager();
export default customModalManager;
import { memo, useEffect, useRef, useState } from "react";
import bottomModal, { constants } from "../../service/BottomModal";
import widgets from "../../config/modal/modal-list";
const initialData = {
data: null,
};
const BottomModalProvider = () => {
const [data, setData] = useState(initialData);
const [name, setName] = useState < string > null;
const modalRef = useRef < HTMLDivElement > null;
useEffect(() => {
function handleOpenModal(name, data) {
console.log("LOG", name);
setName(name);
setData(data);
}
function handleClose() {
console.log("LOG", "close");
setName(null);
setData(initialData);
}
bottomModal.addEventListener(constants.OPEN, handleOpenModal);
bottomModal.addEventListener(constants.CLOSE, handleClose);
return () => {
bottomModal.removeEventListener(constants.OPEN, handleOpenModal);
bottomModal.removeEventListener(constants.CLOSE, handleClose);
};
}, []);
const handleCloseModal = (e: any) => {
if (modalRef.current && !modalRef.current.contains(e.target)) {
console.log("LOG", "close");
bottomModal.close();
}
};
const Widget = widgets[name];
return (
<>
{name && Widget && (
<div
onClick={handleCloseModal}
className="animate-backdrop fixed z-[1000] h-full w-full overflow-hidden flex items-end"
>
<div className="animate-fromBottom w-full" ref={modalRef}>
<Widget {...data.data} />
</div>
</div>
)}
</>
);
};
export default memo(BottomModalProvider);
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import ModalPrompts from "./modals/prompt";
import { ModalProvider } from "@4i/modal-manager";
import "@4i/modal-manager/src/styles.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
// Define your modal actions here
export const modalAction = {
MODAL_PROMPT: "modal-prompt",
};
// Your modal list should be an object with modal names
// as keys and modal components as values.
const list = {
[modalAction.MODAL_PROMPT]: ModalPrompts,
};
root.render(
<React.StrictMode>
<App />
<ModalProvider modalList={list} />
</React.StrictMode>
);
import { modalAction } from ".";
import "./App.css";
import { modal } from "@4i/modal-manager";
const App = () => {
const handleClick = () => {
// Call the modal by its action name
modal.call(modalAction.MODAL_PROMPT, {
// You can pass any props to your modal component
title: "Modal title",
content: "Modal content",
});
};
return (
<div className="app">
<button
onClick={handleClick}
className="w-[200px] h-[80px] mx-auto bg-teal-800 text-white"
>
Click to call modal
</button>
</div>
);
};
export default App;
import React from "react";
import { modal } from "@4i/modal-manager";
// Get props
const ModalPrompts = ({ title, content }) => {
const handleClose = () => {
modal.close();
};
return (
<div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
<h1>{title}</h1>
<p>{content}</p>
<button onClick={handleClose}>Close</button>
</div>
);
};
export default ModalPrompts;
Feel free to tailor this documentation to better fit your package's specific features and capabilities.