brycedorn / react-intense

A React component for viewing large images up close 🔍

hey 🦑

I'm Bryce, I'm from Chicago 🍕 live in Amsterdam 🚲 work at Uber and sometimes write things on dev.to.

react-intense's Issues

A string ref, "container", has been found within a strict mode tree.

Warning: A string ref, "container", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref
at div
at ReactIntense (http://localhost:3000/static/js/bundle.js:42573:5)
at span
at div
at GetImages (http://localhost:3000/static/js/bundle.js:229:78)
at Routes (http://localhost:3000/static/js/bundle.js:44995:5)
at Router (http://localhost:3000/static/js/bundle.js:44928:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:43737:5)
at App

How can i fix it?,
Thanks.

No React 16 support

PropTypes has been deprecated and moved to a separate package.

Not sure if there is anything else that needs doing.

Using React Intense Issue in Next JS app

Hello,
prior to all I should say massive thank you for this gorgeous component. The problem I face while using this component is the issue I encounter in next js app and compilation does not work out properly. how can I fix this issue ?

the most error I face is the below error line :

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders.

The above code turns up even I use loader in webpack

I'm getting an error when I try to compile

I'm using create-react-app to test your component, but I'm having this error :

Error in ./~/react-intense/lib/ReactIntense.js Module parse failed: /Users/Me/TestApp/TestApp/node_modules/react-intense/lib/ReactIntense.js Unexpected token (264:28) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (264:28) @ ./src/App.js 22:20-44

Cannot get it run in my app or with your repo.

When I test your orginal git repo I'll get the error message:

npm start error: no native build was found for platform=linux arch=x64 runtime=node abi=108 uv=1 libc=glibc node=18.0.0

When I test it in my application either with installed react-intense or local copy in lib folder (like in your repo) there are no pitures shown and there is no error message in the console of my edge browsers.

Am I missing any requirements?

loading indicator

https://github.com/franverona/loadgo

Missing NPM package: `autobind-decorator`

./node_modules/react-intense/dist/ReactIntense.js
Module not found: Can't resolve 'autobind-decorator' in '/Users/reuven/Projects/STL/stl-pwa/node_modules/react-intense/dist'

I've uninstalled and reinstalled react-intense a few times and it didn't help.
Here are my dependencies:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.17",
    "@fortawesome/free-solid-svg-icons": "5.8.1",
    "@fortawesome/react-fontawesome": "0.1.4",
    "@typeform/embed": "0.5.12",
    "animate.css": "3.7.0",
    "node-fetch": "2.3.0",
    "react": "16.8.5",
    "react-animate-on-scroll": "2.1.5",
    "react-device-detect": "1.6.2",
    "react-dom": "16.8.5",
    "react-ga": "2.5.7",
    "react-google-login": "4.0.1",
    "react-intense": "^0.1.6",
    "react-popup": "0.9.3",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.8",
    "react-stripe-checkout": "2.6.3",
    "semantic-ui-css": "2.4.1",
    "semantic-ui-react": "0.84.0",
    "sohotokenlabs-api": "1.0.20",
    "stripe": "6.28.0",
    "uuid": "3.3.2"
  }

Usage with NextJS not possible

Currently, this library require-s the CSS; this fails when used with NextJS:

Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-intense/dist/ReactIntense.js

A possible fix could be to prefer manually importing the CSS.

0.1.11 version doesn't work with React 18.2.0

When importing

import ReactIntense from "react-intense";

throws

Module not found: Error: Can't resolve 'react-intense'

Using with responsive images

Hey @brycedorn, thanks for the React port!

I just opened an issue in the main library before I remembered your port. I'm using responsive images in my app so far (using srcset & picture) and wondering how does react-intense play with that paradigm?

Thank you!

React shouldn't be specified under dependencies

Currently, react is specified under dependencies – this means that installing this component will give you multiple copies of React–unless you're using the exact version specified in your package.json.

Could not resolve dependency: npm ERR! peer react@"^16.8.3" from [email protected]

Navigating to next image

It'd be useful to navigate between a set of pictures with arrows or/and by displaying navigation left/right icon near the borders of the image

Looper, lastPosition, mouseCurr and transform being constantly recalculated even when mouse is stationary

Hey @brycedorn, an issue that I notice when running this is the looper, mouseCurr, lastPosition, transform state variables are being constantly re-calculated even when the mouse is not being touched or moved.

Is this intended?

(I imagine this is why it leads to high CPU usage on my computer, since the component is being re-rendered given the constant state re-calculation?)

Got this error when I use yarn

Scrolling disabled after dismissing enlarged image

Across multiple browsers, I have found that after dismissing an enlarged image I am unable to scroll on the page anymore. There must be an event to release the locked scrolling that is not getting hit. I see nothing in the console.