Hyperapp #v2 Portal Component (Experimental)

hyperapp-portal-component-example.js

import { app, h } from "hyperapp";
import { Portal } from './helpers'

/* Working example, https://codepen.io/sergey-shpak/pen/gZGpjZ */

// --- PORTAL COMPONENT ---

const Modal = (props, child) => Portal(
  child, // or h(YourDialogComponent, props, child)
  document.getElementById('modal-root') // dom node
)

app({
  init: 1,
  view: () => h('div', {}, [
    'Application',
    h(Modal, {}, 'Modal Content')
  ]),
  container: document.getElementById('app-root')
})

Portal.js

import { h } from "hyperapp";

/*
This is implementation of Hyperapp#v2 Portal component
Portal component renders children into a DOM node 
that exists outside the DOM hierarchy of the parent component

IMPORTANT! It's not recommended approach to use 
unless you really know what you're doing
*/

export const Portal = (child, container) => h('div', { 
  onCreate: element => 
    container.appendChild(document.adoptNode(element))
}, child)