react-image-shimmer

React Image (Suspense-like) Loader component that simulates a shimmer effect

Usage no npm install needed!

<script type="module">
  import reactImageShimmer from 'https://cdn.skypack.dev/react-image-shimmer';
</script>

README

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