react-image-shimmer

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

Live Demo

Install

npm i react-image-shimmer

or

yarn add react-image-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>
  )
}

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	Description
src	string	yes
fallback	ReactNode	yes
errorFallback	func	no
onLoad	func	no
delay	number	no		Delay in milliseconds before showing the fallback
fadeIn	bool	no	false	Use built-in fade animation on img
test	bool	no	false	For testing, this property remain fallback even after load image
nativeImgProps	React.ImgHTMLAttributes	no

---

Contributing

---

Feel free to send PRs.

License

MIT © gokcan