64

GitHub - gokcan/react-shimmer: React <img> component that simulates a shim...

 6 years ago
source link: https://github.com/gokcan/react-shimmer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

README.md

react-shimmer

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

NPM JavaScript Style Guide Maintainability

Live Demo

Install

npm install --save react-shimmer

Usage

import React, { Component } from 'react'

import ShimmerImage from 'react-shimmer'

export default class App extends Component {
  render () {
    return (
      <div>
        <ShimmerImage 
          src={'https://example.com/test.jpg'}
          width={120} height={120}
          style={{objectFit: 'cover'}} // Style your <img> as you would normally do.
          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)

Contributing

Feel free to send PRs.

License

MIT © gokcan


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK