🤙🏼 How I Handle Async Image Loading in React with Suspense-like library?

Gokcan Degirmenci — Sat, 16 May 2020 22:00:05 +0000

Long story short, I wrote a Suspense-like async loading, native, React <img> component almost two years ago. And today, I've published major changes to react-shimmer. (Thank you Mr. Quarantine 👌🏼).

Introducing the Release v3.0.0 🤙🏼🌠

Source code has been rewritten in TypeScript.
Native <img> component props (all of them) are preserved.
Enforced "separation of concerns" between the actual async handling logic and "loaders". New pluggable-loader architecture.
Better dependency management + deploy/publish process.
Zero dependencies.

Check it out! 😇

gokcan / react-shimmer

🌠Suspense-like loading, native React <img> component

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

Install

npm i react-shimmer

yarn add react-shimmer

Usage

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

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

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

Properties

Property	Type	Required	Default value

…

View on GitHub

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

Gokcan Degirmenci — Fri, 12 Oct 2018 13:58:22 +0000

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

Live Demo

Install

npm i react-shimmer

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'

…

View on GitHub

You may also reach out to me on Twitter.

DEV Community: Gokcan Degirmenci

🤙🏼 How I Handle Async Image Loading in React with Suspense-like library?

gokcan / react-shimmer

🌠Suspense-like loading, native React <img> component

Live Demo

Install

Usage

Properties

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

The Problem 😐

Introducing the solution 🧠

gokcan / react-shimmer

🌠 Async loading, performant Image component for React.js

Live Demo

Install

Usage