react-custom-scrollbars - npm Package Compare versions

Comparing version 2.0.0-beta to 2.0.0

lib/Scrollbars.js

@@ -31,3 +31,3 @@ 'use strict';
 
-var _elementGetters = require('./elementGetters');
+var _render = require('./render');
 
@@ -44,7 +44,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
         onScroll: _react.PropTypes.func,
-        scrollbarHorizontal: _react.PropTypes.func,
-        scrollbarVertical: _react.PropTypes.func,
-        thumbHorizontal: _react.PropTypes.func,
-        thumbVertical: _react.PropTypes.func,
-        view: _react.PropTypes.func,
+        renderScrollbarHorizontal: _react.PropTypes.func,
+        renderScrollbarVertical: _react.PropTypes.func,
+        renderThumbHorizontal: _react.PropTypes.func,
+        renderThumbVertical: _react.PropTypes.func,
+        renderView: _react.PropTypes.func,
         style: _react.PropTypes.object,
@@ -56,7 +56,7 @@ children: _react.PropTypes.node
         return {
-            scrollbarHorizontal: _elementGetters.getDefaultScrollbarHorizontal,
-            scrollbarVertical: _elementGetters.getDefaultScrollbarVertical,
-            thumbHorizontal: _elementGetters.getDefaultThumbHorizontal,
-            thumbVertical: _elementGetters.getDefaultThumbVertical,
-            view: _elementGetters.getDefaultView
+            renderScrollbarHorizontal: _render.renderDefaultScrollbarHorizontal,
+            renderScrollbarVertical: _render.renderDefaultScrollbarVertical,
+            renderThumbHorizontal: _render.renderDefaultThumbHorizontal,
+            renderThumbVertical: _render.renderDefaultThumbVertical,
+            renderView: _render.renderDefaultView
         };
@@ -345,11 +345,11 @@ },
         var style = _props.style;
-        var scrollbarHorizontal = _props.scrollbarHorizontal;
-        var scrollbarVertical = _props.scrollbarVertical;
-        var thumbHorizontal = _props.thumbHorizontal;
-        var thumbVertical = _props.thumbVertical;
-        var view = _props.view;
+        var renderScrollbarHorizontal = _props.renderScrollbarHorizontal;
+        var renderScrollbarVertical = _props.renderScrollbarVertical;
+        var renderThumbHorizontal = _props.renderThumbHorizontal;
+        var renderThumbVertical = _props.renderThumbVertical;
+        var renderView = _props.renderView;
         var onScroll = _props.onScroll;
         var children = _props.children;
 
-        var props = _objectWithoutProperties(_props, ['style', 'scrollbarHorizontal', 'scrollbarVertical', 'thumbHorizontal', 'thumbVertical', 'view', 'onScroll', 'children']);
+        var props = _objectWithoutProperties(_props, ['style', 'renderScrollbarHorizontal', 'renderScrollbarVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'renderView', 'onScroll', 'children']);
 
@@ -376,7 +376,7 @@ var containerStyle = _extends({
             _extends({}, props, { style: containerStyle }),
-            (0, _react.cloneElement)(view({ style: viewStyle }), { ref: 'view' }, children),
-            (0, _react.cloneElement)(scrollbarHorizontal({ style: _styles.scrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(thumbHorizontal({ style: _styles.thumbHorizontalStyle }), { ref: 'thumbHorizontal' })),
-            (0, _react.cloneElement)(scrollbarVertical({ style: _styles.scrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(thumbVertical({ style: _styles.thumbVerticalStyle }), { ref: 'thumbVertical' }))
+            (0, _react.cloneElement)(renderView({ style: viewStyle }), { ref: 'view' }, children),
+            (0, _react.cloneElement)(renderScrollbarHorizontal({ style: _styles.scrollbarHorizontalStyle }), { ref: 'barHorizontal' }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyle }), { ref: 'thumbHorizontal' })),
+            (0, _react.cloneElement)(renderScrollbarVertical({ style: _styles.scrollbarVerticalStyle }), { ref: 'barVertical' }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyle }), { ref: 'thumbVertical' }))
         );
     }
 });

package.json

 {
   "name": "react-custom-scrollbars",
-  "version": "2.0.0-beta",
+  "version": "2.0.0",
   "description": "React scrollbars component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -9,8 +9,8 @@ react-custom-scrollbars
 * lightweight scrollbars made of 100% react goodness
-* native scrolling for mobile devices
-* no dependencies
+* frictionless native browser scrolling
+* native scrollbars for mobile devices
+* fully customizable
+* `requestAnimationFrame` for 60fps
 * no extra stylesheets
-* fully customizable
 * IE9+ support
-* react@0.14.0-rc1
 * **[check out the demo](http://malte-wessel.github.io/react-custom-scrollbars/)**
@@ -67,7 +67,7 @@
         className="container"
-        scrollbarHorizontal={props => <div {...props} className="scrollbar-horizontal" />}
-        scrollbarVertical={props => <div {...props} className="scrollbar-vertical"/>}
-        thumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
-        thumbVertical={props => <div {...props} className="thumb-vertical"/>}
-        view={props => <div {...props} className="view"/>}>
+        renderScrollbarHorizontal={props => <div {...props} className="scrollbar-horizontal" />}
+        renderScrollbarVertical={props => <div {...props} className="scrollbar-vertical"/>}
+        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
+        renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
+        renderView={props => <div {...props} className="view"/>}>
         {this.props.children}
@@ -112,7 +112,7 @@ </Scrollbars>
 * **The following properties expect a react element to be returned. You can customize the element to your needs.**
-* `scrollbarHorizontal`: (Function) Horizontal scrollbar element
-* `scrollbarVertical`: (Function) Vertical scrollbar element
-* `thumbHorizontal`: (Function) Horizontal thumb element
-* `thumbVertical`: (Function) Vertical thumb element
-* `view`: (Function) The element your content will be rendered in
+* `renderScrollbarHorizontal`: (Function) Horizontal scrollbar element
+* `renderScrollbarVertical`: (Function) Vertical scrollbar element
+* `renderThumbHorizontal`: (Function) Horizontal thumb element
+* `renderThumbVertical`: (Function) Vertical thumb element
+* `renderView`: (Function) The element your content will be rendered in
 
@@ -129,5 +129,5 @@ **Don't forget to pass the received props to your custom element. Example:**
         // Set a custom className
-        scrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>}
+        renderScrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>}
         // Customize inline styles
-        scrollbarVertical={({ style, ...props}) => {
+        renderScrollbarVertical={({ style, ...props}) => {
           return <div style={{...style, padding: 20}} {...props}/>;
@@ -134,0 +134,0 @@ }}>

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33029

increased by0.89%

Number of low quality alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes