🌠 react-shimmer: a Better way to handle async images in React!

gokcan

Gokcan Degirmenci

Posted on October 12, 2018

🌠 react-shimmer: a Better way to handle async images in React!

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

GitHub logo gokcan / react-shimmer

🌠 Async loading, performant Image component for React.js

Logo

A powerful, customisable, Suspense-like <img> component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

NPM JavaScript Style Guide Github Actions CI Status Maintainability

Header

Install

npm i react-shimmer
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-shimmer
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode
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>
  )
}
Enter fullscreen mode Exit fullscreen mode

or you can use your custom React component as a fallback:

import React from 'react'
…
Enter fullscreen mode Exit fullscreen mode

react-shimmer

  • You may also reach out to me on Twitter.
πŸ’– πŸ’ͺ πŸ™… 🚩
gokcan
Gokcan Degirmenci

Posted on October 12, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related