react-teleporter
Version:
Teleport React components in the same React tree.
3 lines (2 loc) • 717 B
JavaScript
import*as u from"react";import*as a from"react-dom";const f=({multiSources:o}={})=>{const e={element:null,set:null},l=t=>{e.element=t,e.set&&e.set.current&&e.set.current(t)};return{Source:({children:t})=>{const[r,s]=u.useState(null);if(u.useLayoutEffect(()=>{const c={current:s};let n;return e.set&&(n=e.set,!o&&e.set.current&&e.set.current(null)),e.set=c,e.element!==void 0&&s(e.element),()=>{c.current=null,e.set=null,n&&n.current&&(e.set=n,e.element!==void 0&&n.current(e.element))}},[]),!r)return null;const m=typeof t=="function"?t(r):t;return a.createPortal(m,r)},Target:({as:t="div",...r})=>u.createElement(t,{ref:l,...r}),useTargetRef:()=>l}};export{f as createTeleporter};
//# sourceMappingURL=index.mjs.map