Package Exports

@vlzh/react-modal-manager

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vlzh/react-modal-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Manager for modals in your react application

npm GitHub issues npm bundle size

Installation

yarn add @vlzh/react-modal-manager

npm add @vlzh/react-modal-manager

API

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

Events

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
}

Example

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`);
});

Modal.setAppElement("#root");

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
        </button>
    );
};

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

ReactDOM.render(<App />, document.getElementById("root"));

Changelog

2.0.0 - Support of parameters