Are there any drawbacks when rendering a React component inside an svg foreignObject?
I am using jointJS as a diagramming library. It creates nodes on a graph using svg elements.
I want to use react to render the content of those nodes, and since jointJS lets me configure what svg element i want it to use, all I have to do is
- Configure jointJS so it knowns a node is a
<foreignObject> - Retrieve that foreign object, and mount a react component inside of it using
createPortal - Dynamically size the foreign object so it fits the react component.
It works fine, but I don't have enough experience with foreignObject to know if any caveats are to be expected.
Can anyone provide some feedback about their experience with such practices ?
Answering my own (old) question feels a bit like:
If you're reading this because you're faced with a similar issue, my advice is to avoid being in this situation in the first place.
Some standard CSS features will behave inconsistently, won't work at all, or will have very different outputs depending on the browser you're using.
If I remember correctly, transform and opacity are the two main problematic properties.
Also, animating those properties will rarely work at first try.
Perhaps this is such an edge case that browser bugs are not often found and reported. (and probably not prioritised).
We ended up developing a flowchart library that natively uses react to display nodes.
Cheers!!
- How does React determine which state to apply when children are conditionally rendered?
- Set min/max on TextField type="number"?
- React Router Outlet Not Rendering in Nested Routes While Testing with React Testing Library After Upgrading to v7
- How can I add margin (space between each box) to all my rendered items in react virtualized grid?
- Prevent filtered list rerender when source array is modified
- Recharts issue with gaps between Bars
- how can i use application/ld+json in nextjs
- dynamically pass unknown number of parameters to react router
- Displaying an option's Name rather than ID in a MUI multi-select dropdown's renderValue
- CSS from tailwind.admin.config.js not overriding tailwind.config.js when using @config directive
- Custom HTML elements in intro.js
- Webpack: process.env undefined using DefinePlugin and DotEnv
- Resend email doesn't work in production environement with next js, but works in development
- React resetting and preserving state?
- Uncaught TypeError: sys is undefined when using Chakra UI with Vite
- Create A Folder and Switch to Folder while Using Multer
- Confusion about how to add submodule in Git
- How to render values onto screen?
- import Excel from "exceljs" throwing error on browser TypeError: Cannot read property 'prototype' of undefined
- React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElement
- how can i get useState value inside useCallback (react hook)
- Material UI Autocomplete custom renderInput
- Unable to debug "Cannot use import outside a module" in azure web app (node:process)
- Why can't I resolve a promise via a ref stored resolve function in React?
- Nextjs: TypeError: unsupported file type: undefined after update to v.11
- How to trigger useEffects before render in React?
- Why usecallback is triggered but the dependencies are not updated?
- React-dropzone style drop area
- Material UI TextField type='search': How to replace/modify the 'clear' icon?
- Which is the best way to make API call in react web application should i use react fetch or is there available any other best tool