Now supports passing props to scrollable node.

This allow usage with libraries that control scrolling like react-beautiful-dnd.
Grsmto · Feb 15, 2019 · 44867d7 · 44867d7
1 parent 0016518
commit 44867d7
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 deletions.
diff --git a/packages/simplebar-react/__snapshots__/index.test.js.snap b/packages/simplebar-react/__snapshots__/index.test.js.snap
@@ -63,6 +63,71 @@ exports[`renders with options 1`] = `
 </div>
 `;
 
+
+exports[`renders with scrollableNodeProps 1`] = `
+<div
+  data-simplebar={true}
+  data-simplebar-auto-hide="false"
+>
+  <div
+    className="simplebar-wrapper"
+  >
+    <div
+      className="simplebar-height-auto-observer-wrapper"
+    >
+      <div
+        className="simplebar-height-auto-observer"
+      />
+    </div>
+    <div
+      className="simplebar-mask"
+    >
+      <div
+        className="simplebar-offset"
+      >
+        <div
+          className="simplebar-content test"
+          data-test="test"
+        >
+          <p>
+            Some content
+          </p>
+          <p>
+            Some content
+          </p>
+          <p>
+            Some content
+          </p>
+          <p>
+            Some content
+          </p>
+          <p>
+            Some content
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      className="simplebar-placeholder"
+    />
+  </div>
+  <div
+    className="simplebar-track simplebar-horizontal"
+  >
+    <div
+      className="simplebar-scrollbar"
+    />
+  </div>
+  <div
+    className="simplebar-track simplebar-vertical"
+  >
+    <div
+      className="simplebar-scrollbar"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders without crashing 1`] = `
 <div
   data-simplebar={true}

diff --git a/packages/simplebar-react/index.js b/packages/simplebar-react/index.js
@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import 'simplebar';
 
-export default function SimpleBar({ children, ...options }) {
+export default function SimpleBar({ children, scrollableNodeProps, ...options }) {
   return <div data-simplebar {...options}>
       <div className="simplebar-wrapper">
         <div className="simplebar-height-auto-observer-wrapper">
           <div className="simplebar-height-auto-observer" />
         </div>
         <div className="simplebar-mask">
           <div className="simplebar-offset">
-            <div className="simplebar-content">{children}</div>
+            <div {...scrollableNodeProps} className={`simplebar-content${scrollableNodeProps && scrollableNodeProps.className ? ` ${scrollableNodeProps.className}` : ''}`}>{children}</div>
           </div>
         </div>
         <div className="simplebar-placeholder" />

diff --git a/packages/simplebar-react/index.test.js b/packages/simplebar-react/index.test.js
@@ -26,3 +26,15 @@ test('renders with options', () => {
   let tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('renders with scrollableNodeProps', () => {
+  const component = renderer.create(
+    <SimpleBar scrollableNodeProps={{ className: 'test', 'data-test': "test" }} data-simplebar-auto-hide="false">
+      {[...Array(5)].map((x, i) =>
+        <p key={i}>Some content</p>
+      )}
+    </SimpleBar>
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});