react-modal-priority
v1.1.0
Published
Downloads
29
Readme
react-modal-priority
react-priority-modal is a lightweight, easy-to-use library for managing the priority of modals in web applications. This library allows developers to control which modal appears on top of others based on a flexible priority system.
Features
Priority-Based Modal Management: Easily assign priorities to modals to control their stacking order.
Dynamic Priority Adjustment: Change the priorities of modals on the fly.
Event Handling: Ensure higher priority modals receive events first.
Cross-Platform Compatibility: Works seamlessly across different browsers and devices.
Easy Integration: Designed to be easily integrated into existing projects.
Installation
npm install react-modal-priority
Quickstart
//wrap App inside of ModalProvider
import App from "./App.tsx";
import { ModalProvider } from "react-modal-priority";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<ModalProvider>
<App />
</ModalProvider>
</React.StrictMode>
);
in the App.tsx
import { usePriorityModal } from "react-modal-priority";
const Modal = ({ onClose } : { onClose : () => void; }) =>
(
<div>
My Awesome Modal
<button onClick={onClose}>Close</button>
</div>
);
const App = () => {
const { showModal, closeModal } = usePriorityModal();
const handleCloseModal = () => {
closeModal("my_awesome_modal_id");
}
const handleOnClick = () => showModal({
component: Modal,
componentProps: {
onClose: handleCloseModal;
}
id: "my_awesome_modal_id",
priority: 10,
});
return (
<div>
<button onClick={handleOnClick}>show modal</button>
</div>
);
}
Advanced Usage
Component Props Types
import { usePriorityModal } from "react-modal-priority";
const ProfileCard = ({
name,
surname,
age,
}: {
name: string;
surname: string;
age: number;
}) => (
<div>
<p>{name}</p>
<p>{surname}</p>
<p>{age}</p>
</div>
);
const App = () => {
const { showModal } = usePriorityModal();
const handleOnClick = () => showModal<typeof ProfileCard>({
component: Modal,
componentProps: {
name: "Jubei",
surname: "Kibagami",
age: 26
}
id: "my_awesome_modal_id",
priority: 1,
});
return (
<div>
<button onClick={handleOnClick}>show modal</button>
</div>
);
}
useCurrentModal
Usint this approach you can avoid of passing closeModal function to the component to close it, instead you can use useCurrentModal inside the component and close it directly without using ID
import { usePriorityModal, useCurrentModal } from "react-modal-priority";
const Modal = () => (
const { closeModal } = useCurrentModal();
<div>
<p>My Awesome Modal</p>
<button onClick={()=>closeModal()}>Close Modal</button>
</div>
);
const App = () => {
const { showModal } = usePriorityModal();
const handleOnClick = () => showModal<typeof Modal>({
component: Modal,
//id: "my_awesome_modal_id",
priority: 1000,
});
return (
<div>
<button onClick={handleOnClick}>show modal</button>
</div>
);
}
Super Priority
Modals with
superPriority: true
option will appear on the top of the all modals regardless of priorities of other modals
const Modal = () => <div>My Awesome Modal</div>
//This modal has higher priority
showModal({
component : Modal,
superPriority: true
});
//This modal has lower priority
showModal({
component: Modal,
priority: 99999
});
Super Priority
Modals with
keepMounted: true
option will remain in the HTML tree even after closing the modal
const Modal = () => <div>My Awesome Modal</div>
//Closing this will not remove the rendered html from the browser
showModal({
component : Modal,
keepMounted: true,
});
Interval
Modals with e.g
interval: 1000
option will be back after1000 milliseconds
const Modal = () => {
//After closing this modal it will be back after 1000 milliseconds
const { closeModal } = useCurrentModal();
return (
<div>
<p>My Awesome Modal</p>
<button onClick={closeModal}></button>
</div>
);
}
showModal({
component : Modal,
interval: 1000,
});
deleteIntervalModal
import { usePriorityModal, useCurrentModal } from "react-modal-priority";
const Modal = () => (
const { closeModal } = useCurrentModal();
<div>
<p>My Awesome Modal</p>
<button onClick={closeModal}>Close Modal</button>
</div>
);
const App = () => {
const { showModal, deleteIntervalModal } = usePriorityModal();
const handleOnClick = () => showModal<typeof Modal>({
component: Modal,
id: "my_awesome_interval_modal",
interval: 1000
});
return (
<div>
<button onClick={handleOnClick}>Show Interval Modal</button>
<buttononClick{()=>deleteIntervalModal("my_awesome_interval_modal")}>Delete Interval Modal</button>
</div>
);
}