wrapchildren

Author: nghiepdev

README.md

@@ -95,7 +95,7 @@ render() {
   ...
 ```
 
-### Sample 2: (Using `display: flex`)
+### Sample 2: Recommended(Using `display: flex`)
 
 ```js
   import Scrollbar from 'smooth-scrollbar-react';

examples/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Scrollbar from '..';
+import Scrollbar from '../index';
 
 class App extends React.Component {
   handleScroll = (status, scrollbar) => console.log(status, scrollbar);
@@ -26,17 +26,17 @@ class App extends React.Component {
             innerRef={node => (this.scrollbar = node)}
             onScroll={this.handleScroll}
           >
-            {Array(50)
-              .fill(1)
-              .map((value, index) => <div key={index}>{value + index}</div>)}
+            {[...Array(50).keys()].map((value, index) => (
+              <div key={index}>{value + index}</div>
+            ))}
           </Scrollbar>
         </div>
 
         <Scrollbar>
           <div className="sample-container-2" style={{ maxHeight: 250 }}>
-            {Array(40)
-              .fill(1)
-              .map((value, index) => <div key={index}>{value + index}</div>)}
+            {[...Array(40).keys()].map((value, index) => (
+              <div key={index}>{value + index}</div>
+            ))}
           </div>
         </Scrollbar>
       </div>

index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SmoothScrollbar from 'smooth-scrollbar';
 import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';
+
 SmoothScrollbar.use(OverscrollPlugin);
 
 class Scrollbar extends React.Component {
@@ -67,26 +68,33 @@ class Scrollbar extends React.Component {
 
   render() {
     const { children } = this.props;
-
     const count = React.Children.count(children);
 
-    return count === 1 && typeof children.type === 'string'
-      ? React.cloneElement(children, {
-          ref: node => (this.container = node),
-        })
-      : React.createElement(
-          'div',
-          {
-            ref: node => (this.container = node),
-            style: {
-              WebkitBoxFlex: 1,
-              msFlex: 1,
-              MozFlex: 1,
-              flex: 1,
-            },
-          },
-          children
-        );
+    if (count === 1 && typeof children.type === 'string') {
+      return React.cloneElement(children, {
+        ref: node => (this.container = node),
+      });
+    }
+
+    return React.createElement(
+      'div',
+      {
+        ref: node => (this.container = node),
+        style: {
+          WebkitBoxFlex: 1,
+          msFlex: 1,
+          MozFlex: 1,
+          flex: 1,
+        },
+      },
+      React.createElement(
+        'div',
+        {
+          className: 'scroll-content-inner',
+        },
+        children
+      )
+    );
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smooth-scrollbar-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A wrapper for smooth-scrollbar to React Component",
   "author": "Nghiệp<me@nghiepit.pro>",
   "homepage": "http://smooth-scrollbar-react.surge.sh",