react-disposable-modal
React-disposable-modal is a reactive API for building modal components in React.
Motivation
You want to build a modal in React, but don't want that modal to be
inserted in the DOM immediately where the Modal is rendered, instead you
want it to be appended to document.body
.
Modals have are inherently an asyncronous ui component. A modal is displayed, at some point in the future an action is taken from within the modal, and then it is closed. React-disposable-modal provides a reactive API for handling that asyncronous behavior.
Setup
yarn add react-disposable-modal
Usage
There are two ways to use react-dispoable-modal: an imperative and declarative API:
1. Imperative Usage
createCancelableModal(ModalComponent, props)
- Takes two parameters, a
custom modal component and optional parameters to pass to the modal.
ModalComponent
will be rendered with three extra props:
onNext
- Use to pass data to the subscription that invoked the modal. Can be called multiple times.
onError
- Use to pass an error to the subscription that invoked the modal.
onCompleted
- Use to close the modal.
Example:
;; Component { return <div> <div className="screen" /> <div className="modal"> <h1>My modal for thispropsname</h1> <button onClick=thispropsonCompleted>Cancel</button> <button onClick= thisprops thisprops > Save </button> </div> </div> ; } Component { return <div> <button onClick=thisshowModal>Show Modal</button> </div> ; } { const subscription = ; subscription; // force the modal closed }
2. Declarative Usage
Anything put inside the Modal
component will be appended to document.body
.
Example:
;; Component state = showModal: false ; { return <div> <button onClick= this> Show Modal </button> thisshowModal && <Modal> <div> <div className="screen" /> <div className="modal"> <h1>My modal for you</h1> <button onClick= this> Cancel </button> <button onClick= this> Save </button> </div> </div> </Modal> </div> ; }
Note
React-disposable-modal uses underneath the hood both react-disposable-decorator and disposable-component;