Add example

.storybook/config.js

@@ -19,10 +19,11 @@ setAddon(chaptersAddon);
 addDecorator(story => (
   <Fragment>
     <PageTitle />
-    <Spacer />
+    <Spacer dir="down" />
     <div style={{ padding: '20px' }}>
       {story()}
     </div>
+    <Spacer dir="up" />
   </Fragment>
 ));
 

package.json

@@ -24,7 +24,7 @@
     "postpublish": "npm run publish-storybook",
     "prepublish": ". ./.scripts/prepublish.sh",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
-    "storybook": "start-storybook -p 9010",
+    "storybook": "NODE_ENV=development start-storybook -p 9010",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "test": "npm run lint && npm run testonly",
     "testonly": "jest --config jest-config.js"
@@ -64,8 +64,11 @@
     "react": "^16.0.0",
     "react-aspect-ratio": "^1.0.3",
     "react-dom": "^16.0.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-storybook-addon-chapters": "^3.1.3",
     "react-test-renderer": "^16.0.0",
+    "recompose": "^0.30.0",
     "storybook-addon-jsx": "^7.0.0"
   },
   "peerDependencies": {

src/stories/chapters/enterCallback.jsx

@@ -2,19 +2,36 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import omit from 'lodash/omit';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-import handleViewport, { customProps } from '../../index';
+import { handleViewport, customProps } from '../../index';
 import { Block } from '../common/themeComponent';
+import RefBlock from '../common/ref';
 
 const ViewportBlock = handleViewport(Block, {}, { disconnectOnLeave: false });
+const ViewportBlockThreshold = handleViewport(
+  Block,
+  { threshold: [0, 1.0] },
+  { disconnectOnLeave: false }
+);
+
 const CustomAnchor = ({ forwardedRef, inViewport, ...restProps }) => {
   const text = inViewport ? 'Link (in viewport)' : 'Link (not in viewport)';
   return (
     <a
       href="https://github.com/roderickhsiao/react-in-viewport#readme"
       {...omit(restProps, customProps)}
       ref={forwardedRef}
-      style={{ padding: '20px 0' }}
+      style={{
+        padding: '20px 0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '400px',
+        height: '300px',
+        backgroundColor: inViewport ? '#217ac0' : '#ff9800',
+        color: '#fff'
+      }}
     >
       {text}
     </a>
@@ -59,4 +76,43 @@ storiesOf('Enter and Leave callback', module)
         ]
       }
     ]
+  })
+  .addWithChapters('Ref component', {
+    subtitle: 'Multiple layer HOC',
+    chapters: [
+      {
+        sections: [
+          {
+            title: 'onEnterViewport and onLeaveViewport callback',
+            sectionFn: () => (
+              <Router>
+                <RefBlock
+                  onEnterViewport={() => action('callback')('onEnterViewport')}
+                  onLeaveViewport={() => action('callback')('onLeaveViewport')}
+                />
+              </Router>
+            )
+          }
+        ]
+      }
+    ]
+  })
+  .addWithChapters('Threshold', {
+    subtitle: 'Set different threshold',
+    chapters: [
+      {
+        sections: [
+          {
+            title: 'onEnterViewport and onLeaveViewport callback',
+            subtitle: 'threshold 1.0',
+            sectionFn: () => (
+              <ViewportBlockThreshold
+                onEnterViewport={() => action('callbackWithThreshold')('onEnterViewport')}
+                onLeaveViewport={() => action('callbackWithThreshold')('onLeaveViewport')}
+              />
+            )
+          }
+        ]
+      }
+    ]
   });

src/stories/common/ref.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { compose, setDisplayName } from 'recompose';
+import { withRouter } from 'react-router';
+
+import { handleViewport } from '../../index';
+
+import { Block } from './themeComponent';
+
+// https://github.com/ReactTraining/react-router/issues/6056
+const withRouterAndRef = Wrapped => {
+  const WithRouter = withRouter(({ forwardRef, ...otherProps }) => (
+    <Wrapped ref={forwardRef} {...otherProps} />
+  ));
+  const WithRouterAndRef = React.forwardRef((props, ref) => (
+    <WithRouter {...props} forwardRef={ref} />
+  ));
+  const name = Wrapped.displayName || Wrapped.name;
+  WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
+  return WithRouterAndRef;
+};
+
+export default compose(
+  setDisplayName('DemoComponent'),
+  withRouterAndRef,
+  handleViewport
+)(Block);

src/stories/common/themeComponent.jsx

@@ -61,12 +61,12 @@ export const Block = props => {
 
 Block.displayName = 'Block';
 
-export const Spacer = () => (
+export const Spacer = ({ dir = 'down' }) => (
   <div style={{ height: '100vh', padding: '20px' }}>
     <p>
-      Scroll down to make component in viewport{' '}
+      {`Scroll ${dir} to make component in viewport`}{' '}
       <span role="img" aria-label="down">
-        👇
+        {dir === 'down' ? '👇' : '☝️'}
       </span>{' '}
     </p>
   </div>