v4.1.0

• [BUGFIX] Fix a bug that when using multiple instances, all the instances use same options.

v4.0.1

• Update dependencies

v4.0.0

Breaking Changes

• Remove setHistory(), use LazyProvider instead.
• Add LazyProvider (by React new Context API), when the value changed, all the Lazy instances will be reset.

Improvements

• Hoist non react statics in @lazy decorator. However customized decorator is still recommended.

v3.0.1

• Change the extension of es module from '.mjs' to '.esm.js'

v3.0.0

Breaking Changes

• @lazy will not hoist non react static methods from wrapped component. We recommend creating your own decorator better rather than using @lazy, since you will bind your own logic such as loading data by redial with onLoading().
• Remove triggerStyle from Lazy
• Add loaderComponent (default is div) and loaderProps to Lazy.

loaderComponent and loaderProps will be used to build loader component with IntersectionObserver. The result of props.render(status, props) will be rendered as children of loader component.

Make sure to check the status, otherwise the real component may be rendered twice (unmounted => remounted).

v2.0.0

rrr-lazy 2.0

What's new

• Code refactoring
• Upgrade react 15 to react 16.2.0 and use JSX Fragments to monitor the position of trigger. The mode container | placeholder is not required any more.
• Support root and rootMargin of IntersectionObserver.
• Add lifecycle hooks (onError, onLoading, onLoaded, onUnload). You can pass Promise functions to these hooks in order to load data or do something asynchronously.

Migration from v1.0

Children is not supported from 2.0. Use render() method instead just like react-router 4.

<Lazy style={{ height: 762 }} offset={300}>
    <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</Lazy>

to

<Lazy
  rootMargin="300px 0"
  render={(status) => (status === 'loaded' ? (
    <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
  ) : (
    <div style={{ height: 762 }} />
  ))}
/>

status is one of 'loading', 'loaded', 'unload'.

Use life-cycle hooks instead of onContentVisible.

<Lazy
  style={{ height: 720 }}
  onContentVisible={() => console.log('look ma I have been lazyloaded!')}
>
  <img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' />
</Lazy>

to

<Lazy
  rootMargin="720px 0"
  render={(status) => (status === 'loaded' ? (
    <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
  ) : (
    <div />
  ))}
  onLoaded={() => console.log('look ma I have been lazyloaded!')}
/>

For more information, please refer to the documentation of 2.0.

v1.4.0

• Update deps and use setTimeout instead of ric

v1.3.3

• Remove debug message

v1.3.2

• [BUGFIX] Patch IntersectionObserverEntry::isIntersecting for old Chrome browser

v1.3.1

• [BUGFIX] Fix a bug for Safari