Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?
Related
I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.
NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.
The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.
What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?
If you need more information please don't hesitate to let me know. Thanks for any advice in advance.
This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.
I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.
I want to use a loader such as the one on Youtube before the content is loaded. On youtube, every piece of content uses a light gray color loader before rendering the actual content. It is made of squares and circles to simulate the actual content about to be rendered.
Do you know what it is ? Surprisingly, I couldn't find it neither on material-ui nor via a google search.
ok, I found the solution to my problem.
What I was looking for is called "placeholder UI", or "skeleton screen".
In my case, I want to use it with ReactJS. Semantic UI React has the placeholder part of the library :
https://react.semantic-ui.com/elements/placeholder/#content-line
Material-UI, and other styling libraries do not. There are however external packages for that, such as :
https://github.com/buildo/react-placeholder
https://github.com/danilowoz/react-content-loader
https://github.com/dvtng/react-loading-skeleton
It's also possible to implement skeleton screens oneself using a combination of html, svg and css.
I have an iOS app in which, we take user pics, and then allowed them to put some random custom images above the pics.
While placing these custom pics above real image, they can rotate, scale these custom image. ( See this StickerViewIOS )
Now I am looking for exact same solution while making ReactNative.
Tried lot of Googling but no results found.
Just want to ask community if any of the ReactNative component available for the same.
Thanks,
There's no rotation support, but I did something similar for an app I made for Chain React.
Here's the image component that supports gestures: https://github.com/cball/ChainReactPhotobomb/blob/master/App/Components/TransformableImage.js
To overlay them on top, just use the ImageBackground Component
I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);