I have an svg in a String variable. I get this string from an API call, so this information is dynamically present. I want to render this string via React.createElement dynamically on browser. How do I do this?
One way is to parse svg string into elements, then call React.createElement(...) for each element inside svg recursively, but writing an SVG parser doesn't seem to be optimal. Is there a cleaner way?
Thanks
You can try this: <div dangerouslySetInnerHTML={{__html:'<svg ....></svg>'}}/>
Related
i want to make item list to component using with fetched data(items).
what do is mean?, and how can I solve this problem?
It looks like you made ItemComponent as a string, not an actual JSX Component.
You should make ItemComponent.jsx file make and actual component and try to render it again.
I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API.
Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out.
My JSX String looks like
'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'
Hi I figured out JsxParser is the right way of solving my problem.
react-jsx-parser provides capability to parser and render react component from JSX string.
I have a component that renders an image. The image will be different based on an api call and the data being returned.
Based on api call I will get a string such as the following:
{
assetName: 'company123'
}
I would like to pass this prop down to the component which will then reference an image we have for that name.
/images/company123.png
<img src={'/images/${assetName}.png'} />
Typically I would just import the image and use it but this is not possible when I need to change the image based on the prop value.
How can I achieve the above?
Thanks,
Lee
I think you are mixing the quotations with backticks string concatenation and it should be the backticks instead.
<img src={`/images/${assetName}.png`} />
Note: This is called template literals. (Thanks, Chris).
More on template literals
I am trying to load an SVG containing a map of country regions and then dynamically colorize the paths based on other data in the render function.
Is there a way in react to load a static SVG file at build or runtime and modify styles dynamically when rendering based on properties passed in?
You can use https://www.npmjs.com/package/react-samy-svg . This is how you can load an svg file and change an attribute. (No need to paste the svg code into the jsx)
<Samy path="https://raw.githubusercontent.com/hugozap/react-samy-svg/master/examples/1.svg">
<Proxy select="#Star" fill="red"/>
</Samy>
A Proxy element will select an svg element (using CSS selectors) and forward all its props to the selected element as attributes.
There is nothing hard about it.
Loading SVG file - just use $.ajax call for the resource, with dataType: 'text'
Use dangerouslySetInnerHTML to put it anywhere.
Changing of colors really depends on the way your SVG is structured. Ideally you should be able to change colors just using CSS (e.g. swap classes or generate style dynamically). If everything else fails, SVG is just text so you can do any text processing (color replacement) between steps 1 and 2.
I think it would be quite tough if even possible.
There are some approaches that claim to solve similar problem of converting string to react components (react-jsx-parser, html-to-react), or alternatively you can try converting html -> JSX -> JS (last step using babel) and subsequently requiring resulting js to obtain generated component.
Taking into account complexity of the steps above it might be simpler just to render SVG as html content of some div (using dangerouslySetInnerHTML) and later modify its styles using JS/jquery directly.
I use some DOM string manipulation libraries to generate HTML string and then inject them to some React components using dangerouslySetInnerHTML in my project, does react will add them to the virtual DOM? Can I still get the performance benefits from React in this way?
Yes and no. They're represented as string props, and the current html string as a whole is compared to the previous string using the equality operator.
There's no checking within the strings, or parsing the html into virtual dom. You can parse the html yourself, or modify the code generating it to output virtual dom instead.