From 37b502cfba86d235c0e5eb64376c995a3c49da31 Mon Sep 17 00:00:00 2001
From: Ahmad El-Banna <aba@churchdesk.com>
Date: Wed, 10 Jul 2019 11:41:46 +0200
Subject: [PATCH] feature/add optional usePortal

---
 index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/index.tsx b/index.tsx
index 5cee831..a1ad128 100644
--- a/index.tsx
+++ b/index.tsx
@@ -2,7 +2,7 @@ import { IAugmentedJQuery, IComponentOptions } from 'angular'
 import fromPairs = require('lodash.frompairs')
 import NgComponent from 'ngcomponent'
 import * as React from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import { render,createPortal, unmountComponentAtNode } from 'react-dom'
 
 /**
  * Wraps a React component in Angular. Returns a new Angular component.
@@ -18,7 +18,8 @@ import { render, unmountComponentAtNode } from 'react-dom'
 export function react2angular<Props>(
   Class: React.ComponentType<Props>,
   bindingNames: (keyof Props)[] | null = null,
-  injectNames: string[] = []
+  injectNames: string[] = [],
+  usePortal: boolean = false
 ): IComponentOptions {
   const names = bindingNames
     || (Class.propTypes && Object.keys(Class.propTypes) as (keyof Props)[])
@@ -41,7 +42,8 @@ export function react2angular<Props>(
       }
       render() {
         if (!this.isDestroyed) {
-          render(
+          usePortal ? createPortal(<Class {...this.props} {...this.injectedProps as any} />,
+            this.$element[0]) : render(
             <Class {...this.props} {...this.injectedProps as any} />,
             this.$element[0]
           )