how is it going?
it has been some time since i was around here and i learned a new things being one of them react, i'm developing a personal project and i'm stuck with developing a light/dark mode with bootstrap in react, how can i do this? is there any example video or code or anything you know about it? i found in youtube only plain css and since i'm using bootstrap i'm afraid that won't work for my project, it could just change my background but i want to change also some structures of my site, any advice or tip would be really thankful.
Yeah I can help !
You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/
, github link : https://github.com/Satellite-system/TextUtils---React-js-Web
Hope it will help.
It was actually a project from youtube, but I have forgot its channel.
Related
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
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
I'm make a graphical website, so I use three.js for implement it.
For a reference, I searched a lots of site and found some interest site.
https://www.magicleap.com/ is made with React.js.
Connect the site and scroll up/down, it's effect like move forward and backward.
So I wonder that, which library used in this site to implement animation with scroll?
Anyone who know about that, please comment it.
Thanks.
It seems they are using next.js.
Sources:
https://react-etc.net/entry/who-is-using-next-js
https://builtwith.com/?https%3a%2f%2fwww.magicleap.com%2f
I'am using Reactjs for the first time and I want to make my website responsive .
So, Is there a library helps me to get a responsive design ?
thank you.
So this isn't something that React will do for you as building a responsive site is something more along the css that you decide to use.
What I would recommend you adding to your react project is another project like bootstrap which will give you the power to create a responsive website. It also has a lot of other basics that you can use in your project to build upon. Specifically for the responsive overview you will want to check out this link => https://getbootstrap.com/docs/4.0/layout/overview/
I have been trying to figure how to set this up properly, but no luck. Screen looks blank and no errors on browser console.
Sample Github demo:
https://github.com/oocoder/onsenui-wp-demo
Has anybody tried to set this up?
Thanks. I was able to resolve the issue by assigning ons to the global window object and waiting for Angular on ready event to run the onsenui bindings.
Use: onsenui#2.0.0-beta.7
Sample: https://github.com/oocoder/onsenui-wp-demo
I am unfamiliar with webpack, but adding Onsen to a project is really nothing more than adding some additional files to a standard html project. Some installer options are listed here: https://onsen.io/guide/getting_started.html
Also, to get started with browserify, see the docs here: https://onsen.io/2/
var onsen = require('onsenui/js/onsenui');
onsen.ready(function() {
onsen.notification.alert({message: 'Onsen UI works with browserify!'});
});
So, if that is not working, I often recommend for people to get started by going here: https://monaca.io/cloud.html
Sign up for their free account which is to access their awesome cloud IDE. From there, just create a project and select the Onsen 2.0 Quickstart. After that you can export the project and import it into your favorite IDE. You are now setup to develop Onsen apps.
On a side note, I really recommend their cloud IDE. It has so many amazing features and it makes development a breeze.