I'm so confused. The (github) widget works well on desktop, but something breaks on mobile browsers. I want (1) the css and (2) the this.props.date to be updated, on mobile as it is on desktop browsers. look at the (deleted from my codesandbox to save room, run from github, it is create-react-app) on desktop, and then look at it on mobile to notice these issues. I don't know specifically where in the code the mobile browsers is wrong. It is not polyfill startPad with create-react-app, I took that out. Is there another problem with create-react-app webpack I'm hitting?
codesandbox-code Edit: I deleted this when I was cleaning my github, you can see an optimized version of the calendar for use at https://codesandbox.io/s/recursing-paper-4vosh or https://github.com/NickCarducci/Wavepoint.la
glad china's calendar
Nearly three months later I reconstructed Glad's component to not use functions inside jsx, but that wasn't the problem (although I think it is better practice, right?)
(fixed, but not a clear answer) The problem was symptomatic of css designation for {inMonth} variable, which I made state and moved around... to parent component... basedate was the issue in a function isSameMonth() which somehow was getting the browsing date on Desktop, but not on mobile
(link to codesandbox Month component) anyway, here is my version of Glad's calendar, a lot easier to customize if you learned React post-2018, I guess
https://codesandbox.io/s/recursing-paper-4vosh?file=/src/components/Calendar/FullCalDrawer/MonthCalSlider.js (Tap bottom-right circle [half-way covered by 'open sandbox on mobile], Thumbprint logo to open calendar, then top left dots icon to open monthly view)... shows {inMonth} designation for in Child component's css on mobile now
This will also be on https://github.com/Wavepoint.la a day or so after this post
(I tried making it a codepen & jsbin but failed, need to move on)
Related
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
For context, I am building a React/Redux chrome extension that is a sit/stand timer. When an interval is up, the extension will pop up and give the options to stay in that posture for longer, or log that they have changed positions.
Since I cannot programmatically open the popup.html, I am thinking that I can use a content script to inject a modal into whatever tab the user is currently on.
I've been googling "Injecting React Component Into Chrome Extension" for a couple of hours now, and most of the articles are a couple of years old and have not worked for me.
If anyone has knowledge, a tutorial, or an alternative solution, that would be amazing. Thanks!
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 use create-react-app 16.["react": "^16.8.4", "react-scripts": "^2.1.8"]
I read the blog on profiling react performance by Ben Schwarz using Chrome Dev tools:
https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
He recommends to export your JS with source-maps.
When he does a performance trace, and clicks on a given react component in the User Timing section, specific component information shows in the Bottum-Up section with ** blue links to the source code** on the right hand side. This links don`t show, when I click on React components. When I click on components like for instance Evaluate Script, the blue links on the right hand side show.
Isn`t source mapping supposed to work "out-of-the-box" with create-react-app 16 in development.
I want to source-map only in development using Chrome Dev tools. Source mapping is activated in the Chrome Browser. What am I missing?
Thx in advance
P.S.:Since I haven`t got 10 reputation points I´m not suppose to use screenshots, which in this case made things not quite easy. I hope I managed to explain my problem sufficiently, though.
The Source Files for Debugging will be available under your localhost:3000 in the Chrome devtools.
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
We always tend to search under webpack://
Changes have been made to the newer versions I beleive
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/