Closed OmegaHawkeye closed 2 years ago
There are multiple ways for you to do this in React, but if you want to use the .toSVG()
function I've quickly threw together an example using react-inlinesvg and dangerouslySetInnerHTML.
Both approaches are valid, but I would recommend using the first one as it is more customizable and it's also less susceptible to XSS attacks.
Example: https://codesandbox.io/s/r6operators-react-example-d91xj?file=/src/App.js
Thx for the quick response.
That really made some things way clearer and easier.
U said there are multiple ways for React, could u provide some links. I'm just learning React and Redux Toolkit with this project so it would help a lot.
I would recommend reading the docs for the two most used dependencies for SVGs in React (react-svg, react-svgr). These show a different way of directly importing the .svg
files instead which allows for a few advantages but also at increased complexity if you use dynamic file names (like for operator names)
Hi,
I really like this repo but I have one Issue by trying to integrate it with React.
I get the operators I want to dynamically display from my backend/api but if I try to apply the
.toSVG
function, I get like it says just a string representation of the SVG and I dont know and didnt found a simple Solution to display that properly as a tag in React.Hope u understand my problem and mby u can help me.