React img component that simulates a shimmer effect stars while loading

React img component that simulates a shimmer effect stars while loading

A powerful, customisable, img component that simulates a shimmer effect while loading.

Logo

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.

NPM JavaScript Style Guide Circle CI Status Maintainability

Header

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

Github Repository

Tags: #React #Images