I recently saw traced SVG image loading in gatsby.js
https://medium.com/workshop-me/traced-svg-images-for-excellent-ux-d75a6bb4caed
Is there any way in which i can implement this in create-react-app, with automation.
Right now,
I use create-react-app and cloudinary. I store the url in my database,
I couldn't find a good resource through which I can make this happen.
Help would be appreciated.
If you read the post and what it uses, you find that it uses https://github.com/lovell/sharp, which accepts an image as parameter, in your case you can download the image, apply the filter and finally use the most important part of this technique:
<div
style={{
backgroundImage: `url("${realUrl}"), url("${
tracedSVG
}")`,
}}
/>
</div>
Then the browser will do the dynamic load for you.
Related
am trying to make my react page shareable on Facebook and Twitter.
I tried everything I could, I have been googling all day, but I cant find the answer.
<FacebookShareButton url={window.location.href} title={exactNews.text ?exactNews.title : ""}>
<FaFacebookF/>
</FacebookShareButton>
any tips?
There is no way to pass an image to the share options anymore, the only way to add an image to a shared URL is by using the og:image tag in the source. Be aware that Facebook ignores JavaScript, so the og:image tag must be in the original source and not dynamically added via JavaScript. Facebook then automatically uses the image specified in the og:image tag.
More information: https://ogp.me/
I am generating pdf using react-to-print library,
But i want to break the page in new page,
There is css property break-after:always, it can work, but not all major browser supports it now,
Anyone know any other method then brute force margin ?
Working with pdf is hard, specially css part.
https://www.npmjs.com/package/react-to-print
https://developer.mozilla.org/en-US/docs/Web/CSS/break-after
I would like to recommend to use React PDF npm library. Please check https://react-pdf.org
I'm trying to load images from API to my client app. My first idea (which maybe is entirely wrong) is to save pictures on a folder and store a path to an image in the database, instead of storing an image inside a db. The problem is with with retrieving and displaying an image.
My first attempt was looking like this:
<Card.Img variant="top" src={props.postPic} />
where props.postPic woud look like this: C:\Users\Admin\Desktop\img.jpg. But React can't seem to find it. Then I created the folder inside a src folder.
Hardcoding the path seems to work:
<Card.Img variant="top" src={require('../../../../Images/post_pics/' + "256546654_2093222944148704_432196633022662491_n.jpg")} />
However, when I tried to pass it as a parameter:
<Card.Img variant="top" src={require('../../../../Images/post_pics/' + props.imagePath + ".jpg")} />
where props.imagePath is now just an image name, the console in browser says Uncaught (in promise) Error: Cannot find module './0347008d-1f7c-47da-8bc5-a740374b4208.jpg'.
I also tried string interpolation:
<Card.Img variant="top" src={require(`../../../../Images/post_pics/${props.imagePath}.jpg`)} />
Which gives the same result. Can I somehow achieve with the way am doing it (storing path to image in DB or name of the image) or do I have to change the implementation? If so, what is the proper way of handling images in database?
Okay, I will share what I could find.
I haven't managed to set local paths to React, this either seems a bad approach, or it's simply impossible. Instead, I changed the way of handling photos in my API. I send them to the API, convert them to Base64 stringand store them inside the database. Then, when I send base64 from database to React component, I load it like this:
src={`data:image/jpeg;base64,${this.props.imagePath}`}
where imagePath is base64 string.
In real life applications, images are stored in cloud like in S3, or digitalocean spaces. and the link of the image which is stored in cloud is saved in database.
But in your scenario you are not uploading it to aany clou provider.
And as you are using your local Images stored in your project directory you can import them and then use them.
Referring to the image below, I need to display an external website on the right side of the screen when the link 'All chats' is clicked.
,
I tried to use window.location to achieve it but this is redirecting my site to the new site.
<RouteAuthenticated path={match.path} component={() => { window.location = 'https://www.google.com/'; return null; }} />
How can I get this done?
You can use iframes in the same way you can in standard HTML. Note that most website block being displayed in an iframe in other websites due to XSS vulnerabilities.
<iframe id="iFrameExample"
title="iFrame Example"
src="https://example.com">
</iframe>
One way around this is to use the sandbox attribute for iframes. See here for the different sandbox properties but they often will break functionality of the site. Other issues you may run into are iframe breakers which are basically unavoidable unless you have access to the code of the 3rd party website.
Yes, via iFrames it is possible to load webpages inside of other web pages.Window.location will not help you to do this. You have to use iFrames.
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect