DEV Community

loading...

πŸ€™πŸΌ How I Handle Async Image Loading in React with Suspense-like library?

gokcan profile image Gokcan Degirmenci ・1 min read

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! πŸ˜‡

GitHub logo gokcan / react-shimmer

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

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

Live Demo

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&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
…

react-shimmer

Discussion (0)

Forem Open with the Forem app