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!)

npm i react-shimmer

yarn add react-shimmer

import React from 'react'
import Image, { Shimmer } from 'react-shimmer'
function App() {
  return (
    <div&gt
      <Image
        src='https://source.unsplash.com/random/800x600'
        fallback={<Shimmer width={800} height={600} />}
      /&gt
    </div>
  )
}

import React from 'react'
import Image from 'react-shimmer'

import Spinner from './Spinner'

function App(props) {
  return (
    <div>
      <Image
        src="https://example.com/test.jpg"
        fallback={<Spinner />}
      />
    </div>
  )
}

• You may also reach out to me on Twitter.