disposable-component

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