react-better-image
A progressive image component with a better user experience.
Last updated 2 years ago by huangteng .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-better-image 
SYNC missed versions from official npm registry.

react-better-image

A progressive image component with a better user experience.

NPM JavaScript Style Guide

Install

npm install --save react-better-image

Usage

import React, { Component } from 'react'

import BetterImage from 'react-better-image'

class Example extends Component {
  render () {
    return (
      <BetterImage
        source={'your source image url'}
        placeholder={'a loading component or a thumbnail image url, also can be a func like () => <Loading/>'}
        alt={'alt'}
        onload={(CurrentDOMElement) => {'img onload event, the current dom element be observed as param'}}
        enter={() => {'Image enters the viewable area'}}
        leave={() => {'Image leaves the viewable area'}}
        onlyEnter={false} // if true,will only emit the enter callback, leave function will not be called
        root={'default null, your viewable area target dom element'}
        rootMargin={'default "0px, 0px"'}
      />
    )
  }
}

More

if you want to understand the implementation principle of this component. And the settings of root, rootMargin and other parameters.

please refer to --> intersection-observer.

License

MIT © bobi

Current Tags

  • 1.0.0                                ...           latest (2 years ago)

1 Versions

  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |