-
Notifications
You must be signed in to change notification settings - Fork 38
Closed
Description
It looks like the OutPortal wraps the content in a <div>, which results in the content not actually being rendered if it is used within a <svg> since divs cant exist in svgs.
It would be nice if you could specify an optional component prop or something to be used a wrapper for this render. If it was wrapped in a <g> for example, I imagine it would work fine.
Example that doesn't actually work:
import React, { FC, useMemo } from "react";
import { createPortalNode, InPortal, OutPortal } from "react-reverse-portal";
const Test: FC = () => {
const portal = useMemo(() => createPortalNode(), []);
return (
<div>
<svg>
<rect x={0} y={0} width={300} height={50} fill="gray"></rect>
<rect x={0} y={50} width={300} height={50} fill="lightblue"></rect>
<svg x={30} y={10}>
<InPortal node={portal}>
<text alignmentBaseline="text-before-edge" fill="red">
test
</text>
</InPortal>
</svg>
<svg x={30} y={70}>
<OutPortal node={portal} />
</svg>
</svg>
</div>
);
};
export default Test;vdsabevr4j4h
Metadata
Metadata
Assignees
Labels
No labels