@vlzh/react-modal-manager
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-alpha.4 • Public • Published

react-modal-manager

Manager for modals in your react application

npm GitHub issues npm bundle size

Installation

yarn add @vlzh/react-modal-manager

or

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

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

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

Dependents (0)

Package Sidebar

Install

npm i @vlzh/react-modal-manager

Weekly Downloads

14

Version

2.0.0-alpha.4

License

MIT

Unpacked Size

88 kB

Total Files

18

Last publish

Collaborators

  • vlzh