I am calling the API (GET API).
https://upiqr.in/api/qr?name=SantanuSinha&vpa=9096213138#ybl&amount=100
I am calling the API from the LWC
I get the response in the SVG format.
How can I display the SVG that I get in the response on LWC
Are you getting the full svg as text? like <svg>content</svg>, then simply use query selector on a desired div and put innerHtml = response.
Related
Integrating the Toast UI Image Editor in project. Finding that when using it it is sending a request to '/none' which I am trying to get rid of.
When loading the image we are using the loadImage path to pass in image via data:image/png;base64 and somehow it is still requesting a '/none'. I also explored using the loadImageFromURL and seeing it that way but it is still making that request.
I am also curious if this is not related to the image but might be from the Image Editor in general. I am implementing it using #toast-ui/react-image-editor with a useRef.
Load Image passed to ImageEditor:
`
loadImage: {
path: props.image,
name: 'SampleImage',
},
`
This implementation WORKS, but ideally we do not want the extra call to '/none'.
I am trying to populate a Datatable (PrimeReact) column with a custom data, more specifically an image JSX. Now the source of that image needs to be fetched and validated using multiple fetch calls. My problem here is that since Promises are asynchronous, I am not able to form and return that image tag. I would really appreciate any suggestion on how to achieve this.
I have a button with Link tag and routes to a new url and content onClick, basically calls a function.
I wanted to know if I can test whether the url is changed/new content is displayed post click, but I am not able to do so with 'simulate'. Is it possible to check that using jest/enzyme?
I view you can test that using E2E testing.
I prefer https://www.cypress.io/, it is very easy for testing URL changing.
cy.getByTestId('your_button')
.click()
.url()
.should('include', 'expected_url')
FYI: https://docs.cypress.io/api/commands/url.html#No-Args
I saw some posts about iframe and reactjs on stackoverflow but they all want to pass in some args/variables to render. I just want to load a page.
say the page link is "https://some.page.to.load.com"
and I did
<iframe src="https://some.page.to.load.com" width="100%"/>
But all I get is an empty block that doesn't render any content. Am I doing something wrong here?
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.