Add Storybook examples

Author: Daniel Schmidt

stories/Observer.story.js

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import Observer from '../src/index'
 import ScrollWrapper from './ScrollWrapper'
+import RootComponent from './Root'
 
 const Header = props =>
   <div
@@ -60,17 +61,41 @@ storiesOf('Intersection Observer', module)
       </Observer>
     </ScrollWrapper>,
   )
-  .add('With rootMargin', () =>
-    <ScrollWrapper>
-      <Observer
-        threshold={0}
-        rootMargin="100px"
-        onChange={action('Child Observer inview')}
-      >
-        {inView =>
-          <Header>{`Header is fully inside the viewport: ${inView}`}</Header>}
-      </Observer>
-    </ScrollWrapper>,
+  .add('With root', () =>
+    <RootComponent>
+      {node =>
+        <ScrollWrapper>
+          <Observer
+            threshold={0}
+            root={node}
+            rootMargin="64px"
+            rootId="window1"
+            onChange={action('Child Observer inview')}
+          >
+            {inView =>
+              <Header
+              >{`Header is inside the root viewport: ${inView}`}</Header>}
+          </Observer>
+        </ScrollWrapper>}
+    </RootComponent>,
+  )
+  .add('With root and rootMargin', () =>
+    <RootComponent style={{ padding: 64 }}>
+      {node =>
+        <ScrollWrapper>
+          <Observer
+            threshold={0}
+            root={node}
+            rootMargin="64px"
+            rootId="window2"
+            onChange={action('Child Observer inview')}
+          >
+            {inView =>
+              <Header
+              >{`Header is inside the root viewport: ${inView}`}</Header>}
+          </Observer>
+        </ScrollWrapper>}
+    </RootComponent>,
   )
   .add('Trigger once', () =>
     <ScrollWrapper>

stories/Root/index.js

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react'
+
+const style = {
+  margin: '64px',
+  backgroundColor: 'slategrey',
+  overflowY: 'scroll',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  right: '0',
+  bottom: '0',
+}
+
+class RootComponent extends PureComponent {
+  state = {
+    node: null,
+  }
+
+  handleNode = node => {
+    this.rootNode = node
+    this.setState({
+      node,
+    })
+  }
+
+  render() {
+    return (
+      <div ref={this.handleNode} style={{ ...style, ...this.props.style }}>
+        {this.state.node ? this.props.children(this.state.node) : null}
+      </div>
+    )
+  }
+}
+
+export default RootComponent