@tamagui/portal 1.0.1-beta.56 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/portal",
-  "version": "1.0.1-beta.56",
+  "version": "1.0.1-beta.60",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -18,7 +19,7 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/stacks": "^1.0.1-beta.56"
+    "@tamagui/stacks": "^1.0.1-beta.60"
   },
   "peerDependencies": {
     "react": "*",
@@ -26,7 +27,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.56",
+    "@tamagui/build": "^1.0.1-beta.60",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Portal.tsx

@@ -0,0 +1,35 @@
+import '@tamagui/polyfill-dev'
+
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/core'
+import { YStack, YStackProps } from '@tamagui/stacks'
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { Modal } from 'react-native'
+
+export type PortalProps = YStackProps
+
+export const Portal = (props: PortalProps) => {
+  const contents = <YStack pointerEvents="none" fullscreen {...props} />
+
+  if (!isWeb) {
+    // check if theme stays in context here
+    return (
+      <Modal visible transparent pointerEvents="none">
+        {contents}
+      </Modal>
+    )
+  }
+
+  const [hostElement, setHostElement] = React.useState<any>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    setHostElement(globalThis.document?.body)
+  }, [])
+
+  if (hostElement) {
+    return createPortal(contents, hostElement)
+  }
+
+  // ssr return null
+  return null
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './Portal'