feat: Adding WithLazy and WithClientSideOnly (#92)

Author: gja

README.md

@@ -28,8 +28,10 @@ This is a set of components that is to be used to build a Quintype Node App. Thi
          * [Search box](#search-box)
          * [SocialShare](#socialshare)
          * [StoryElement](#storyelement)
+         * [WithClientSideOnly](#withclientsideonly)
          * [WithError](#witherror)
          * [WithHostUrl](#withhosturl)
+         * [WithLazy](#withlazy)
          * [WithMember](#withmember)
          * [WithPreview](#withpreview)
          * [WithSocialLogin](#withsociallogin)
@@ -102,7 +104,7 @@ function interstitial(index) {
 ```
 
 ### ClientSideOnly
-This component will be loaded by client, and bypassed when doing server side rendering.
+This component will be loaded by client, and bypassed when doing server side rendering. Also see [WithClientSideOnly](#WithClientSideOnly) for a render props version.
 
 ```javascript
 import { ClientSideOnly } from '@quintype/components';
@@ -520,6 +522,19 @@ For different quality images in Image Story Element, pass `imageWidths` and `ima
 ```
 <StoryElement story={story} element={element} imageWidths={[420,1040,1600]} imageDefaultWidth={1040}/>
 ```
+
+### WithClientSideOnly
+This component calls the render prop with true if the client side is completely loaded, and false during SSR and initial bootup.
+
+```javascript
+import { WithClientSideOnly } from '@quintype/components';
+<WithClientSideOnly>
+  {({clientSideRendered}) => (
+    {clientSideRendered && <span>This will be shown only on the client side</span>}
+  )}
+</WithClientSideOnly>
+```
+
 ### WithError
 This function can be used to generate a wrapper component that implements `componentDidCatch()`.
 
@@ -548,6 +563,18 @@ import { WithHostUrl } from '@quintype/components';
 }</WithHostUrl>
 ```
 
+### WithLazy
+
+This component can be used to load some DOM just before it scrolls into the screen. Currently, it does not support unloading. The `margin` prop is passed to `IntersectionObserver`.
+
+```javascript
+import { WithLazy } from '@quintype/components';
+
+<WithLazy margin="50px">{() =>
+  <SomeHeavyComponent />
+}</WithLazy>
+```
+
 ### WithMember
 This is a render props component which will call your callback with the current logged in member. It will automatically call `/api/v1/members/me` to figure out if you are logged in, and replace the contents in the store and callback. In future, this may use LocalStorage to cache the member for some time.
 

src/components/client-side-only.js

@@ -14,6 +14,12 @@ class ClientSideOnlyBase extends React.Component {
   }
 }
 
+const defaultFallback = () => <span />
+
+function WithClientSideOnlyBase({clientSideRendered = false, children}) {
+  return children({clientSideRendered})
+}
+
 function mapStateToProps(state) {
   return {
     clientSideRendered: state.clientSideRendered
@@ -25,3 +31,4 @@ function mapDispatchToProps(dispatch) {
 }
 
 export const ClientSideOnly = connect(mapStateToProps, mapDispatchToProps)(ClientSideOnlyBase);
+export const WithClientSideOnly = connect(mapStateToProps, mapDispatchToProps)(WithClientSideOnlyBase);

src/components/with-lazy.js

@@ -0,0 +1,41 @@
+export class WithLazy extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { loaded: false };
+    this.observerRef = React.createRef();
+  }
+
+  render() {
+    if (this.state.loaded) {
+      return this.props.children();
+    } else {
+      return <div style={{ height: this.props.height || 50 }} ref={this.observerRef} />;
+    }
+  }
+
+  componentDidMount() {
+    this.observer = new global.IntersectionObserver((entries, observer) => this.observerCallback(entries, observer), {
+      rootMargin: this.props.margin || "160px"
+    });
+    this.observer.observe(this.observerRef.current);
+  }
+
+  componentWillUnmount() {
+    this.observer.disconnect();
+  }
+
+  observerCallback(entries, observer) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting || entry.isIntersecting === undefined) {
+        this.setState({ loaded: true });
+        observer.disconnect();
+      }
+    });
+  }
+}
+
+WithLazy.propTypes = {
+  children: PropTypes.func.isRequired,
+  margin: PropTypes.string,
+  height: PropTypes.number
+};

src/index.js

@@ -27,6 +27,7 @@ export * from './components/update-on-interval';
 export * from './components/access-type';
 export * from './components/adbutler-ad';
 export * from './components/with-host-url';
+export * from './components/with-lazy';
 
 export * from './store/actions';
 export * from './store/reducers';