react-magic-portal 1.1.2 → 1.1.4

package/packages/example/eslint.config.ts

@@ -7,8 +7,11 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default defineConfig([
-  { files: ['**/*.{js,mjs,cjs,ts}'] },
   {
+    ignores: ['**/dist/*']
+  },
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
     languageOptions: {
       globals: { ...globals.browser, ...globals.node },
       parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname }
@@ -18,8 +21,5 @@ export default defineConfig([
   ...tseslint.configs.recommended,
   prettierPlugin,
   reactHooks.configs['recommended-latest'],
-  reactRefresh.configs.vite,
-  {
-    ignores: ['**/dist/*']
-  }
+  reactRefresh.configs.vite
 ])

package/packages/example/src/App.css

@@ -3,12 +3,10 @@ body {
     padding: 0;
     min-height: 100vh;
     background: white;
-    font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    padding-top: 2rem;
 }
 
 .app {
@@ -20,7 +18,6 @@ body {
 h1 {
     color: #2d3748;
     text-align: center;
-    margin-bottom: 3rem;
     font-size: 2.5rem;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea, #764ba2);
@@ -62,18 +59,13 @@ h2 {
 }
 
 .controls button::before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        rgba(255, 255, 255, 0.2),
-        transparent
-    );
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }
 
@@ -169,7 +161,7 @@ h2 {
 }
 
 .portal-preview {
-    height: 400px;
+    min-height: 500px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -183,23 +175,18 @@ h2 {
 }
 
 .portal-preview::after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(
-        45deg,
-        transparent 30%,
-        rgba(102, 126, 234, 0.03) 50%,
-        transparent 70%
-    );
+    background: linear-gradient(45deg, transparent 30%, rgba(102, 126, 234, 0.03) 50%, transparent 70%);
     pointer-events: none;
 }
 
 .portal-preview:empty::before {
-    content: "📍 Target anchor is hidden. Portal content will not appear.";
+    content: '📍 Target anchor is hidden. Portal content will not appear.';
     opacity: 0.8;
     font-weight: 500;
     color: #4a5568;
@@ -302,7 +289,7 @@ h2 {
 
 /* Visual indicators for different positions */
 .portal-content::before {
-    content: "Portal";
+    content: 'Portal';
     position: absolute;
     top: -0.75rem;
     left: 1rem;
@@ -317,7 +304,7 @@ h2 {
 }
 
 .dynamic-anchor::before {
-    content: "Anchor";
+    content: 'Anchor';
     position: absolute;
     top: -0.75rem;
     left: 1rem;

package/packages/example/src/App.tsx

@@ -4,14 +4,14 @@ import PortalContent from './components/portal-content'
 import './App.css'
 
 function App() {
-  const [showAnchor, setShowAnchor] = useState(false)
+  const [showAnchor, setShowAnchor] = useState(true)
 
-  const handleMount = (anchor: Element, portal: HTMLElement) => {
-    console.log('Portal mounted:', { anchor, portal })
+  const handleMount = (anchor: Element, contaner: Element) => {
+    console.log('Portal mounted:', { anchor, contaner })
   }
 
-  const handleUnmount = (anchor: Element, portal: HTMLElement) => {
-    console.log('Portal unmounted:', { anchor, portal })
+  const handleUnmount = (anchor: Element, contaner: Element) => {
+    console.log('Portal unmounted:', { anchor, contaner })
   }
 
   return (

package/packages/example/src/components/portal-content.tsx

@@ -2,9 +2,10 @@ import { useEffect } from 'react'
 
 interface PortalContentProps {
   position: string
+  ref?: React.Ref<HTMLDivElement>
 }
 
-function PortalContent({ position }: PortalContentProps) {
+function PortalContent({ position, ref }: PortalContentProps) {
   useEffect(() => {
     console.log(`✅ ${position} Portal useEffect mounted`)
     return () => {
@@ -27,7 +28,11 @@ function PortalContent({ position }: PortalContentProps) {
     }
   }
 
-  return <div className={`portal-content ${position}`}>{getContentText()}</div>
+  return (
+    <div ref={ref} className={`portal-content ${position}`}>
+      {getContentText()}
+    </div>
+  )
 }
 
 export default PortalContent