disposable-component
v1.0.0
Published
A simple reactive API for mounting and unmounting components to the DOM
Downloads
100
Maintainers
Keywords
Readme
disposable-component
Disposable-component provides a simple reactive API for mounting and unmounting components to the DOM. This is useful for cross framework interop inside your single-page-app.
Setup
npm install --save rx disposable-component
Usage
A simple example would be to use disposable-component
to build a
react-modal:
import mountComponent from "disposable-component";
import React from "react";
import ReactDOM from "react-dom";
function showModal(El, props) {
return mountComponent(
function mount(next, completed, error) {
el = document.createElement("div");
document.body.appendChild(el);
ReactDOM.render(
<El {...props} close={complete} onNext={next} />,
el
);
},
function unmount() {
ReactDOM.unmountComponentAtNode(el);
el.parentNode.removeChild(el);
}
);
}
const subscription = showModal(function MyModal() {
return (
<div>
<h1>My Modal</h1>
<button onClick={this.props.complete}>Close</button>
<button onClick={this.props.next.bind(null, 1)}>Save</button>
</div>
);
}).subscribe(
data => console.log(data),
err => console.error(err)
);
subscription.unsubscribe(); // close the modal