arunmichaeldsouza / react-image-appear Goto Github PK

It expects the module to already be compiled (/lib/**.js). I did a fixed version here: https://github.com/joshsten/react-image-appear, however I still haven't been able to finish getting the jest tests working again.

Sometimes it shows the loader icon when the image is already loaded.

caching issue maybe?

npm run -script build

Failed to minify the code from this file:

./node_modules/react-image-appear/src/ReactImageAppear.js:10

File location: ./src/constants.js

I have website with dark background and it's very ugly when the img loads with smoked white background. Also, there is an issue when using ReactImageAppear with mozila firefox. Wen made the img with border radius the placeholder backgroud showing off sides.

Here is a photo of the issue: Link

I bolded the line that I think cousing me problems. I think it will be beneficial for many developers if the placeholder doesn't have backgrond and or if there is posability to change it via props.

PLACEHOLDER_STYLE = {
position: 'relative',
display: 'inline-block',
backgroundColor: '#f0f0f0',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'

Is there any way to set the height and width of a loaded image?

See screenshot.
Fixed in #19

First of all this package stole like 3 hours of my life 😿

Not sure what the issue is and I dont plan to use this package anymore tbh, but when mapping an array of src's to ReactImageAppears if any elements are removed from the array the images do not accurately reflect the change. For example, if I have an array of 3 image src's and delete one, only the last index 'disappears'. It made it seem as if my code was only deleting the last index, when in reality it seems the initial load was cached and if any elements were removed, it still rendered the old values

When I try to build, it says:

Failed to minify the code from this file:
        ./node_modules/react-image-appear/src/ReactImageAppear.js:16

React version: 16.8.3
React scripts: 2.1.1

Hello, I'm creating a blog with React / Next.js.
The problem below occurred when loading images. Is there any idea to solve this?

Error message:

/path/to/node_modules/react-image-appear/src/ReactImageAppear.js:7
import React, { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.react-image-appear (/path/to/.next/server/pages/blog.js:751:18)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/blog/index.tsx:12:76)
    at Object../src/pages/blog/index.tsx (/path/to/.next/server/pages/blog.js:535:1)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/path/to/.next/server/pages/blog.js:815:52)
    at /path/to/.next/server/pages/blog.js:816:28
    at Object.<anonymous> (/path/to/.next/server/pages/blog.js:819:3)
    at Module._compile (internal/modules/cjs/loader.js:999:30)

any solution for keep the loader shown on auto with and height image? maybe some props to determine if the image already loaded so i can change the width/height to auto from static number

I'm new to ReactJS but I found this component incredibly difficult to style (the resulting image). Might be helpful to add to the readme how to style the image, I could not figure it out so I'm using the regular

I was trying to pass an onClick prop down to the underlying element, but looking through the code it looks like the onClick prop is never destructured and passed down. Are there any plans in the future to implement this? I'm happy to open a PR for it if needed.

Probably the component is not reacting to props being changed, so if i use this for a slider or something where the src={} changes, it stays the same. I would say this is a pretty big problem.

Hi! I have a problem with this component. the loading gif/placeholder isn't disappearing once the image has loaded.

My steps:

• Web loads.
• Async content API request starts.
• When the content is ready, creates a few ReactImageAppear elements with the API provided src.
• Loader gif appears.
• When the image loads, it's placed behind the loader gif.
• Loading gif doesn't disappear.

after install component app shows error "Can´t find variable: document",