hey
gokcan / react-shimmer Goto Github PK
View Code? Open in Web Editor NEW๐ Async loading, performant Image component for React.js
Home Page: https://nh9x1.csb.app
License: MIT License
๐ Async loading, performant Image component for React.js
Home Page: https://nh9x1.csb.app
License: MIT License
hey
i tried on round image which is styled by border-radius, but the default shimmer effect remain square
In my nextjs application , i install this package
i also used it like this
import Image, { Shimmer } from "react-shimmer";
<Image
src={currentImage}
fallback={<Shimmer width={500} height={540} />}
/>
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>
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.
<Image src={
${
props.imageLink ??
"http://loremflickr.com/480/272/default"
}} alt="button" fallback={<Shimmer width={
100%} height={
100%} />} />
Not yet sure why this happens but it seems the current TypeScript version complains about the Image
component.
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.
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
How to reproduce:
Most Of The Classes Define Create Conflicts when combine with css libraries like tailwinds, since this package as same classes with those other classes.
How could you give a specific width, height if these are unknown until the DOM Loaded?
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?
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!
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 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.
for SEO optimization the image's alt
tag is needed.
It would be optimal to have it on the Image component.
Attempted import error: 'react-shimmer' does not contain a default export (imported as 'Image').
Taken fron https://www.npmjs.com/package/react-shimmer example
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>
)
}
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.
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'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}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.