Add rootID and refactor intersection.js

Author: Daniel Schmidt

README.md

@@ -51,14 +51,17 @@ import 'intersection-observer'
 ## Props
 The **`<Observer />`** accepts the following props:
 
-| Name             | Type      | Default           | Required | Description                                           |
-| ---------------- | --------- | ----------------- | -------- | ----------------------------------------------------- |
-| children         | func/node |                   | true     | Children should be either a function or a node        |
-| tag              | String    |                   | false    | Element tag to use for the wrapping component         |
-| threshold        | Number    | 0                 | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering  |
-| triggerOnce      | Bool      | false             | false     | Only trigger this method once                         |
-| onChange         | Func      |                   | false    | Call this function whenever the in view state changes |
-| render           | Func      |                   | false    | Use render method to only render content when inView  |
+| Name             | Type        | Default           | Required | Description                                           |
+| ---------------- | ----------- | ----------------- | -------- | ----------------------------------------------------- |
+| children         | func/node   |                   | true     | Children should be either a function or a node        |
+| 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         |
+| 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 |
+| render           | Func        |                   | false    | Use render method to only render content when inView  |
 
 ## Example code
 

src/index.js

@@ -21,7 +21,7 @@ class Observer extends Component {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     /** Only trigger the inView callback once */
     triggerOnce: PropTypes.bool,
-    /** Number between 0 and 1 indicating the the percentage that should be visible before triggering */
+    /** 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. */
     threshold: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.number),
       PropTypes.number,