Neologistic Paraphasic Mumbling

    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

    Keywords

    none

    Install

    npm i disposable-component

    DownloadsWeekly Downloads

    38

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    7.75 kB

    Total Files

    10

    Last publish

    Collaborators

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