React img component that simulates a shimmer effect stars while loading

react-shimmer

A powerful, customisable, img component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way.

Install

npm i react-shimmer

Usage

import React, { Component } from 'react'

import Image from 'react-shimmer'

export default class App extends Component {
  render () {
    return (
      <div>
        <Image 
          src={'https://example.com/test.jpg'}
          width={120} height={120}
          style={{objectFit: 'cover'}} // Style your <img> 
          delay={25}
          duration={0.9} // Customize the animation duration (s).
        />
      </div>
    )
  }
}

Properties

Property	Type	Required	Default value	Description
src	string	yes
color	string	no	#f6f7f8	Background color of the loader.
duration	number	no	1.6	Animation duration (s) Higher value == slower animation.
width	number	yes
height	number	yes
style	object	no
onError	func	no
onLoad	func	no
loadingIndicatorSource	string	no
delay	number	no		Delay the starting time of the animation. (ms)

---

GitHub