Portal

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { useEffect, useRef, useState } from "react";
5import { createPortal } from "react-dom";
6 
7const initialLayout: Layout = [
8  { id: "p1", x: 0, y: 0, w: 3, h: 2 },
9  { id: "p2", x: 3, y: 0, w: 3, h: 2 },
10  { id: "p3", x: 6, y: 0, w: 3, h: 2 },
11  { id: "p4", x: 9, y: 0, w: 3, h: 2 },
12];
13 
14export function PortalExample() {
15  const [layout, setLayout] = useState<Layout>(initialLayout);
16  const portalRef = useRef<HTMLDivElement>(null);
17  const [mounted, setMounted] = useState(false);
18 
19  useEffect(() => {
20    setMounted(true);
21  }, []);
22 
23  const grid = (
24    <DndGrid
25      cols={12}
26      layout={layout}
27      onLayoutChange={setLayout}
28      rowHeight={50}
29    >
30      {layout.map((item) => (
31        <div className="grid-item" key={item.id}>
32          {item.id}
33        </div>
34      ))}
35    </DndGrid>
36  );
37 
38  return (
39    <div className="space-y-4">
40      <div className="text-xs text-zinc-500">
41        Grid rendered via createPortal into a separate container.
42      </div>
43      <div
44        className="min-h-[200px] rounded-lg border border-zinc-300 border-dashed p-4"
45        ref={portalRef}
46      />
47      {mounted && portalRef.current && createPortal(grid, portalRef.current)}
48    </div>
49  );
50}