feat: Add enable prop to control sync behavior (#18)

okonet · Aug 3, 2018 · 0b4309b · 0b4309b
1 parent 5494e52
commit 0b4309b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/ScrollSync.js b/src/ScrollSync.js
@@ -12,13 +12,15 @@ export default class ScrollSync extends Component {
     children: PropTypes.element.isRequired,
     proportional: PropTypes.bool,
     vertical: PropTypes.bool,
-    horizontal: PropTypes.bool
+    horizontal: PropTypes.bool,
+    enabled: PropTypes.bool
   };
 
   static defaultProps = {
     proportional: true,
     vertical: true,
-    horizontal: true
+    horizontal: true,
+    enabled: true
   };
 
   static childContextTypes = {
@@ -75,6 +77,10 @@ export default class ScrollSync extends Component {
   }
 
   handlePaneScroll = (node, group) => {
+    if (!this.props.enabled) {
+      return
+    }
+
     window.requestAnimationFrame(() => {
       this.syncScrollPositions(node, group)
     })

diff --git a/src/example.md b/src/example.md
@@ -1,5 +1,7 @@
 To use ScrollSync you have to wrap your scrollable content (ensure that you have `overflow: auto`
  in CSS) in `ScrollSyncPane` and then wrap everything in `ScrollSync`.
+
+If you want to provide a toggle for users to turn the scroll syncing on and off, you can use the `enabled={false}` setting on the main `ScrollSync` element. Note that this disables the scroll syncing for all groups.
 
 ```
 <ScrollSync>
@@ -102,3 +104,4 @@ Provide an arbitrary group name in the `group` prop to ScrollSyncPane components
   </div>
 </ScrollSync>
 ```
+