gokcan / react-shimmer Goto Github PK

Not yet sure why this happens but it seems the current TypeScript version complains about the Image component.

Version: 3.1.1

package.json has the line:

"module": "dist/index.module.js",

...but that file doesn't seem to exist in the built dist folder though (e.g. node_modules/react-shimmer/dist/index.module.js)

I'm encountering errors related to this while trying to build with Parcel.

@parcel/resolver-default: Could not load './dist/index.module.js' from module 'react-shimmer' found in package.json#module
/Users/username/git/project/node_modules/react-shimmer/package.json:22:13
  21 |   "main": "dist/index.js",
> 22 |   "module": "dist/index.module.js",
>    |             ^^^^^^^^^^^^^^^^^^^^^^ './dist/index.module.js' does not exist, did you mean './dist/index.d.ts'?'
  23 |   "source": "src/index.ts",
  24 |   "typings": "dist/index.d.ts",

I wanna try but got this problem.
'Image' cannot be used as a JSX component. Its instance type 'SuspenseImage' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type '{} | null | undefined' is not assignable to type 'ReactNode'. Type '{}' is not assignable to type 'ReactNode'.

I am using latest react with nextjs.

I implemented it using the following code:

 <div className="thumbnail">
            <Image
              src={post.image}
              fallback={<Shimmer width={100} height={100} />}
            />
            </div>

but I'm getting this error in the browser:

This is what I found when I inspected using dev tools:
<span role="button" aria-label="Image failed to load">❌</span>

I want to add custom css into <img, there's no props to handle that

Edit--
I'm already tried add css into className props didn't work

<Image
   src={item.image}
  width={512}
  height={512}
  alt="Berita1"
  className="rounded-xl"
   fadeIn={true}
   delay={2}
  fallback={<Shimmer width={512} height={512} />}
/>

How could you give a specific width, height if these are unknown until the DOM Loaded?

i tried on round image which is styled by border-radius, but the default shimmer effect remain square

for SEO optimization the image's alt tag is needed.

It would be optimal to have it on the Image component.

In my nextjs application , i install this package

import Image,  { Shimmer } from "react-shimmer";

 <Image
   src={currentImage}
    fallback={<Shimmer width={500} height={540} />}
     />

<Image src={${
props.imageLink ??
"http://loremflickr.com/480/272/default"
}} alt="button" fallback={<Shimmer width={100%} height={100%} />} />

Most Of The Classes Define Create Conflicts when combine with css libraries like tailwinds, since this package as same classes with those other classes.

The onload triggers when the image starts rendering so when you use big baseline-encoded images the shimmer / custom loaders goes away when it starts rendering line for line.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

So it will look like this:

How to reproduce:

• use huge images
• set a custom loader
• throttle the network bandwidth in the Chrome devtools settings to the slowest (Slow 3G)

Implemented shimmer inside a owl carousel. If items exceeds four in owl carousel left image is not loading. only shimmer background image shows.

Right now the behavior seems to be not to display anything.

I think it would be best to display the placeholder default color, using the space based on the styles provided.

I can try myself submitting a PR if it sounds like a good idea.

Attempted import error: 'react-shimmer' does not contain a default export (imported as 'Image').
Taken fron https://www.npmjs.com/package/react-shimmer example

i've try to add className in <Image> component, but it doesn't work. here my code
<Image
src={this.props.imageUrl}
fallback={<Shimmer width={800} height={600} />}
className={this.props.className}
/>

While Adding this project as a dependency , I am getting a react version conflict as shown below:

PS D:\React\my-app> npm i react-shimmer
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-shimmer
npm ERR!   react-shimmer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

First, thanks for this lib.

I know, there's some ways to reach something like this by using the onLoad prop to set a state or context and conditional rendering to the target, but It would be awesome if you add a feature to render not only images when the loading is completed, but anything else like a post by using render props or react children technique. Maybe providing a component to do it from react-shimmer?

If I set disable cache in chrome devtool, you can see that it will request double time

I am unable to provide the .rem dimensions to the Shimmer component since it's taking the height and width as number.

Is there any workaround to pass the responsive css paramters.

Thanks for this wonderful module.

Once the component is loaded, and image is rendered. When the image is updated from the state, the updated image is not reflected in the component. It still shows the old image.

Hi, I'm conditionally rendering a component, a modal mini-cart of sorts, and I'm getting a
Can't perform a React state update on an unmounted component ... error
if I close the cart before the image has been loaded.
As you can see on the screenshot, the issue is inside Image component that you're exporting.
Is this fixable? Cheers!

When I use react-shimmer and test a component with that, my tests broke.

has anyone had this problem? found it in version 17 of React

TypeScript error in /node_modules/react-shimmer/dist/index.d.ts(2,1):
Declaration or statement expected.  TS1128

    1 | export { default } from './Image';
  > 2 | export type { ImageProps } from './Image';
      | ^
    3 | export * from './loaders';
    4 | export type { ShimmerProps } from './loaders/shimmer/Shimmer';
    5 | export type { BreathingProps } from './loaders/breathing/Breathing';

I used it like:

import Image, { Shimmer } from 'react-shimmer'

function App() {
  return (
    <div>
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Shimmer width={800} height={600} />}
      />
    </div>
  )
}