The Problem đ
I needed a custom Image component to asynchronously load images in React. After experimenting with possible ideas, I wanted to apply Facebook's original placeholder effect(e.g. Shimmer) in my custom Image component. The challenge was: it also must work nicely with different image sizes and ratios.
Introducing the solution đ§
react-shimmer
is a powerful, highly customizable React <img>
component that simulates a shimmer đ effect while the image is loading. (with zero dependencies!).
- Written entirely in next-gen JS.
- Exactly zero-dependency! Only a few KBs.
- Animation duration, delay and color options are fine-tunable.
- Better error handling compared to default
<img>
. - Same feel of the shimmer effect on different aspect ratios and sizes.
- (P.S. Looking for new contributors, feel free to ping me!)
gokcan / react-shimmer
đ Async loading, performant Image component for React.js
A powerful, customisable, Suspense-like
<img>
component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).
Install
npm i react-shimmer
or
yarn add react-shimmer
Usage
import React from 'react'
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>
)
}
import React from 'react'
import { Image, Breathing } from 'react-shimmer'
function App() {
return (
<div>
<Image
src='https://source.unsplash.com/random/800x600'
fallback={<Breathing width={800} height={600} />}
/>
</div>
)
}
or you can use your custom React component as a fallback:
import React from 'react'
âŠ- You may also reach out to me on Twitter.
Top comments (1)
I already love it! this has been an issue for me for way too long Thanks!