* Added scroll To by container Id feature.

README.md

@@ -14,13 +14,16 @@ A simple scrolling container for react.
 
 #### ScrollContainer
 
-No api available.
+| Prop     | Type | What does it do |
+| :-------- | :---- | :-------- |
+| ContainerId   | String   | The id of the container to use for navigation. |
 
 #### ScrollTo
 
 | Prop     | Type | What does it do |
 | :-------- | :---- | :-------- |
 | SectionId   | String   | The id of the section to navigate to. |
+| ContainerId   | String   | The id of the container the element is in. |
 | Duraton   |  Integer   | The time it will take the scroll to complete the distance in ms.|
 | Offset   |  Integer   | The amount to offset the scrolling to ( 10 means it will scroll 10 pixels higher.)|
 
@@ -37,8 +40,10 @@ No api available.
 
 #### Basic usage of the container and sections
 
+Using the containerId ensures you call a unique element in that specific container.
+
 ```javascript
-<ScrollContainer>
+<ScrollContainer id="newContainer">
     <div>
          <ScrollSection id="section1">
          <somecomponent />
@@ -51,7 +56,7 @@ No api available.
 #### Scroll to a section
 
 ```javascript
-<div onClick={() => ScrollTo('targetId', 10, 500)}>
+<div onClick={() => ScrollTo('targetId','newContainer', 10, 500)}>
 	Click me to navigate to section #1
 </div>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-scroll-container",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple scroll container for React.",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/ScrollContainer/index.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
 
 class ScrollContainer extends React.Component {
     static childContextTypes = {
         scroll: PropTypes.object,
-    }
+    };
 
-    elements = {}
+    elements = {};
 
     handleScroll = () => {
         // console.log('isScrolling', this.elements)
@@ -25,15 +26,20 @@ class ScrollContainer extends React.Component {
         //     }
         //     console.log(n.offsetTop, 'offset')
         // }
-    }
+    };
+
+    getNode = (name) => {
+
+        return findDOMNode(this.elements[name]);
+    };
 
     register = (name, ref) => {
         this.elements[name] = ref
-    }
+    };
 
     unregister = name => {
         delete this.elements[name]
-    }
+    };
 
     getChildContext() {
         return {
@@ -45,7 +51,12 @@ class ScrollContainer extends React.Component {
     }
 
     render() {
-        return <div onScroll={this.handleScroll}>{React.Children.only(this.props.children)}</div>
+        return <div id={this.props.containerId} onScroll={this.handleScroll}>{React.Children.only(this.props.children)}</div>
     }
 }
+
+ScrollContainer.defaultProps = {
+    containerId: ''
+};
+
 export default ScrollContainer

src/components/ScrollSection/index.js

@@ -4,15 +4,15 @@ import PropTypes from 'prop-types'
 class ScrollSection extends React.Component {
     static contextTypes = {
         scroll: PropTypes.object,
-    }
+    };
 
     componentDidMount() {
-        this.context.scroll.register(this.props.sectionId, this._element)
+        this.context.scroll.register(this.props.sectionId, this._element);
         this.props.onMountHandler()
     }
 
     componentWillUnmount() {
-        this.context.scroll.unregister(this.props.sectionId)
+        this.context.scroll.unregister(this.props.sectionId);
         this.props.onUnmountHandler()
 
     }
@@ -40,14 +40,14 @@ ScrollSection.defaultProps = {
     onUnmountHandler: () => null,
     onChangeHandler: () => null,
     onChildHandler: () => null
-}
+};
 
 ScrollSection.propTypes = {
     onMountHandler: PropTypes.func,
     onUnmountHandler: PropTypes.func,
     onChangeHandler: PropTypes.func,
     onChildHandler: PropTypes.func,
     sectionId: PropTypes.string.isRequired
-}
+};
 
 export default ScrollSection

src/index.js

@@ -3,14 +3,34 @@ import scrollIntoView from 'scroll-into-view'
 import ScrollSection from './components/ScrollSection/index'
 import ScrollContainer from './components/ScrollContainer/index'
 
-const ScrollTo = (sectionId, offset = 0, speed = 500) => {
-    const node = document.getElementById(sectionId)
+window.findReactComponent = function(el) {
+    for (const key in el) {
+        if (key.startsWith('__reactInternalInstance$')) {
+            const fiberNode = el[key];
+
+            return fiberNode && fiberNode.return && fiberNode.return.stateNode;
+        }
+    }
+    return null;
+};
+
+const ScrollTo = (sectionId, containerId = null, offset = 0, speed = 500) => {
+    let node = null;
+
+    if( containerId !== null) {
+        const container = document.getElementById(containerId);
+        const containerReact = findReactComponent(container);
+        node = containerReact.getNode(sectionId)
+    } else {
+        node = document.getElementById(sectionId);
+
+    }
     scrollIntoView(node, {
         time: speed,
         align: {
             top: offset,
         },
     })
-}
+};
 
 export { ScrollContainer, ScrollTo, ScrollSection }