Fix storybook, and update docs

Author: thebuilder

README.md

@@ -58,16 +58,16 @@ The **`<Observer />`** accepts the following props:
 | **root**        | HTMLElement             |         | false    | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                |
 | **rootId**      | String                  |         | false    | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. |
 | **rootMargin**  | String                  | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                               |
-| **tag**         | String                  | 'div'   | false    | Element tag to use for the wrapping component                                                                                                                                                                                    |
+| **tag**         | String                  | 'div'   | false    | Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div'                                                                                                                                                                              |
 | **threshold**   | Number                  | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                               |
 | **triggerOnce** | Bool                    | false   | false    | Only trigger this method once                                                                                                                                                                                                    |
 | **onChange**    | Func                    |         | false    | Call this function whenever the in view state changes                                                                                                                                                                            |
 
-## Examples
+## Usage
 
 ### Child as function
 
-The default way to use the `Observer`, is to pass a function as the child. It
+The easiest way to use the `Observer`, is to pass a function as the child. It
 will be called whenever the state changes, with the new value of `inView`.
 By default it will render inside a `<div>`, but you can change the element by setting `tag` to the HTMLElement you need.
 
@@ -107,7 +107,7 @@ export default Component
 ### OnChange callback
 
 You can monitor the onChange method, and control the state in your own
-component. The child node will always be rendered.
+component.
 
 ```js
 import Observer from 'react-intersection-observer'

package.json

@@ -91,9 +91,5 @@
     "react-dom": "^16.3.2",
     "react-test-renderer": "^16.3.2",
     "request": "~2.85.0"
-  },
-  "resolutions": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
   }
 }

src/index.js

@@ -4,7 +4,7 @@ import { observe, unobserve } from './intersection'
 import invariant from 'invariant'
 
 type Props = {
-  /** Element tag to use for the wrapping */
+  /** Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div' */
   tag: string,
   /** Only trigger the inView callback once */
   triggerOnce: boolean,

stories/Observer.story.js

@@ -44,7 +44,9 @@ storiesOf('Intersection Observer', module)
       <Observer
         onChange={action('Render Observer inview')}
         render={({ inView, ref }) => (
-          <Header>Header is inside viewport: {inView.toString()}</Header>
+          <Header innerRef={ref}>
+            Header is inside viewport: {inView.toString()}
+          </Header>
         )}
       />
     </ScrollWrapper>

yarn.lock

@@ -6790,7 +6790,7 @@ react-docgen@^3.0.0-beta11:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@^16.2.0, react-dom@^16.3.2:
+react-dom@^16.3.2:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df"
   dependencies:
@@ -6903,7 +6903,7 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.2.0, react@^16.3.2:
+react@^16.3.2:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
   dependencies: