virtualvivek/react-shimmer

🌠 React Image Loader component that simulates a shimmer effect

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.

Live Demo

Install

npm i react-shimmer

or

yarn add react-shimmer

Usage

import React from 'react'
import Image from 'react-shimmer'

function App(props) {
  return (
    <div>
      <Image
        src="https://example.com/test.jpg"
        width={640} height={480}
        style={{ objectFit: 'cover' }}
      />
    </div>
  )
}

or you can use the fallback prop:

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
color	string	no	#f6f7f8	Background color of the loader.
duration	number	no	1600	Animation duration (ms) Higher value == slower animation.
width	number	yes (no if fallback is present)
height	number	yes (no if fallback is present)
style	object	no
onError	func	no
onLoad	func	no
fallback	React.Element	no
delay	number	no		Delay the starting time of the animation. (ms)

---

Contributing

---

Feel free to send PRs.

License

MIT © gokcan