react-shimmer

前端 图像
图片加载的过程中模拟微光效果 ? 的 React 图片组件

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 Maintainability

Header

Live Demo

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

react-shimmer 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论