diff --git a/packages/components/README.md b/packages/components/README.md index ca8fa68..3358616 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -61,7 +61,7 @@ render() { ### With Placeholder -A higher-order component that can be used to display a placeholder while the component is not in the viewport. +A higher-order component that can be used to display a placeholder while the wrapped component is not in the viewport. This can improve user experience since it can serve as a mechanism for lazy loading. #### Usage @@ -84,6 +84,7 @@ render() { // placeholder={Placeholder} // passing down a placeholder at render time source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }} preTriggerRatio={0.5} + retainOnceInViewport={true} style={{ width: 50, height: 50 }} /> ) } @@ -94,3 +95,4 @@ render() { | Prop | Description | Default | |---|---|---| |**`placeholder`**| Useful for passing down a placeholder at render time. | `null` | +|**`retainOnceInViewport`**| Whether to keep the wrapped component displayed once it enters the viewport. | `false` | diff --git a/packages/components/src/viewport/withPlaceholder/index.js b/packages/components/src/viewport/withPlaceholder/index.js index 39ef691..e2988a3 100644 --- a/packages/components/src/viewport/withPlaceholder/index.js +++ b/packages/components/src/viewport/withPlaceholder/index.js @@ -9,10 +9,21 @@ export default (WrappedComponent, PlaceholderComponent) => { super(props, context) } + componentDidUpdate() { + if (this.props.inViewport && !this._hasEnteredViewport) { + this._hasEnteredViewport = true + } + } + render() { if (this.props.inViewport) { return } + + if (this.props.retainOnceInViewport && this._hasEnteredViewport) { + return + } + return this.props.placeholder ? ( ) : PlaceholderComponent ? ( @@ -23,6 +34,7 @@ export default (WrappedComponent, PlaceholderComponent) => { static propTypes = { inViewport: PropTypes.bool.isRequired, placeholder: PropTypes.func, + retainOnceInViewport: PropTypes.bool, } static displayName = `WithPlaceholder(${WrappedComponent.displayName ||