Manager for modals in your react application

Downloads in past


8142.0.0-alpha.43 years ago3 years agoMinified + gzip package size for @vlzh/react-modal-manager in KB


Manager for modals in your react application
npm GitHub issues npm bundle size
yarn add @vlzh/react-modal-manager

npm add @vlzh/react-modal-manager
You can to manipulate with manager through 2 api:
  • useModalManager(name: string)
  • withModalManager(name: string)

⚠️ Info

You can to call useModalManager and withModalManager with providing name of modal... but there is one point! When you will provide name you just subscribe current component to modalManager + methods returned from useModalManager will be associated with specific modal.

they provide several methods:
  • closeModal(name: string): void - close modal with specific name
  • openModal(name: string): void - open modal with specific name
  • isOpen(name: string): boolean - get opening status for modal with specific name
  • getParams(name: string): boolean - get opening status for modal with specific name
In example bellow you can to see, how to subscribe on event. Supported events:
  • beforeOpen
  • afterOpen
  • beforeClose
  • afterClose

Any provided callback function will call with object like:
    modal_name: string
Edit react-modal-manager
import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-modal";
import { useModalManager, manager } from "@vlzh/react-modal-manager";

// subscribe on event 'afterOpen'
manager.on("afterOpen", ({ modal_name }) => {
    console.log(`Modal ${modal_name} opened`);


const OpenModalButton = () => {
    // if we do not define name in useModalManager this button will not be subscribed on changes in manager, but you must to define modal_name on calling of openModal
    const { openModal } = useModalManager();
    return (
        <button type="button" onClick={() => openModal("example_modal")}>
            Open modal

const App = (props) => {
    const { isOpen, closeModal } = useModalManager("example_modal");
    return (
            <OpenModalButton />
                onRequestClose={() => closeModal("example_modal")}
                contentLabel="Example Modal"
                <button onClick={() => closeModal("example_modal")}>
                <div>I am a modal</div>
                    <input />
                    <button>tab navigation</button>
                    <button>the modal</button>

ReactDOM.render(<App />, document.getElementById("root"));
  • 2.0.0 - Support of parameters