Merge pull request #3723 from xyflow/viewport-portal

Added seperate portal to put dom elements inside the flow
This commit is contained in:
Moritz Klack
2023-12-19 13:16:53 +01:00
committed by GitHub
8 changed files with 44 additions and 1 deletions
@@ -0,0 +1,19 @@
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { useStore } from '../../hooks/useStore';
import type { ReactFlowState } from '../../types';
const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
function ViewportPortal({ children }: { children: ReactNode }) {
const viewPortalDiv = useStore(selector);
if (!viewPortalDiv) {
return null;
}
return createPortal(children, viewPortalDiv);
}
export default ViewportPortal;