@detrenasama/modal-hooker NPM

@detrenasama/modal-hooker

Control your modals with hook

Install

$ npm install @detrenasama/modal-hooker

Usage

Create modal component (wrapper)

Next props will be passed to component:

modal ... content of wrapper. Just draw it in render as {modal} \ isOpening ... current state. Use for animations (styles) \ isClosing ... current state. Use for animations (styles) \ closeModal ... callback for closing this modal

Pass it to ModalContainer for using as default container.

Pass to hook for using it when needed.

useModal(MyModal, {}, ModalWrapper)

Insert ModalContainer component into your Application

If your modal can contain links, put it into your Router component Provide default modal, that will be used as modal wrapper

<ModalContainer defaultModalComponent="ModalWrapper" />

Create modal content component

Instance of this content will be passed as modal prop into your wrapper

function MyModal({title, onClose}) {
    return <div>
        <h3>{title}</h3>
        <button onClick={onClose}>Close</button>
    </div>
}

Use modal hook in component where you need to show modal

function MyPageOrSomething() {
    const [openModal, closeModal] = useModal(MyModal, {
        title: "My title",
        onClose: () => {
            closeModal()
        }
    })
    
    return <div>
        <button onClick={openModal}>Open modal</button>
    </div>
}

Or use it from non-component functions (version >= 2.2.0)

import {declare, open, close} from '@detrenasama/modal-hooker';
function someErrorHandler(error) {
    const modalId = declare(ErrorModal, {
        error: error,
        onClose: () => {
            close(modalId)
        }
    })
    
    open(modalId)
}