35

react-shimmer: React <img> component that simulates a shimmer effect while...

 5 years ago
source link: https://www.tuicool.com/articles/hit/fiINNbi
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.

qmIvMj3.png!web

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.

Z3IZBz2.png!web

Live Demo

vmMBf2i.gif

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)

Contributing

Feel free to send PRs.

License

MIT © gokcan


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK