disposable-component

1.0.0 • Public • Published

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.

npm version Build Status

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

Readme

Keywords

none

Package Sidebar

Install

npm i disposable-component

Weekly Downloads

58

Version

1.0.0

License

MIT

Unpacked Size

7.75 kB

Total Files

10

Last publish

Collaborators

  • alizenguyen
  • parkm
  • greenjeffreym
  • mmemory
  • ron.douglas
  • miracastillo
  • geoctrl
  • tannerrigby
  • rchilds
  • joeldenning
  • blittle
  • dckesler
  • neiloler
  • oklandon
  • dvnrsn
  • frehner