Scrollbars class names

README.md

@@ -59,7 +59,7 @@ For **React 0.13** you need to wrap `<ScrollArea>` child into a function.
 ```
 
 #### Version without boundled css styles ####
-If you prefer including scrollbar without css styles boundled inline to js file it's possible to import package without them. It's useful when you want to make custom css changes in scrollbars without using `!important` in each line. 
+If you prefer including scrollbar without css styles boundled inline to js file it's possible to import package without them. It's useful when you want to make custom css changes in scrollbars without using `!important` in each line.
 
 ```js
     var ScrollArea = require('react-scrollbar/no-css');
@@ -93,10 +93,14 @@ then open [http://localhost:8003](http://localhost:8003).
         contentClassName={String}
         contentStyle={Object}
         horizontal={Boolean}
+        horizontalContainerClassName={String}
         horizontalContainerStyle={Object}
+        horizontalScrollbarClassName={String}
         horizontalScrollbarStyle={Object}
         vertical={Boolean}
+        verticalContainerClassName={String}
         verticalContainerStyle={Object}
+        verticalScrollbarClassName={String}
         verticalScrollbarStyle={Object}
         onScroll={(value) => {}}
         contentWindow={Object}
@@ -139,19 +143,31 @@ Inline styles applied to element with scroll area content.
 When set to false, horizontal scrollbar will not be available.
 **Default: true**
 
+#### horizontalContainerClassName
+CSS class names added to horizontal scrollbar's container.
+
 #### horizontalContainerStyle
 Inline styles applied to horizontal scrollbar's container.
 
+#### horizontalScrollbarClassName
+CSS class names added to horizontal scrollbar.
+
 #### horizontalScrollbarStyle
 Inline styles applied to horizontal scrollbar.
 
 #### vertical
 When set to false, vertical scrollbar will not be available, regardless of the content height.
 **Default: true**
 
+#### verticalContainerClassName
+CSS class names added to vertical scrollbar's container.
+
 #### verticalContainerStyle
 Inline styles applied to vertical scrollbar's container.
 
+#### verticalScrollbarClassName
+CSS class names added to vertical scrollbar.
+
 #### verticalScrollbarStyle
 Inline styles applied to vertical scrollbar.
 
@@ -164,7 +180,7 @@ You can override document to make scrollarea works inside iframe.
 **Default: document**
 
 #### smoothScrolling
-When set to true, smooth scrolling for both scrollbars is enabled. 
+When set to true, smooth scrolling for both scrollbars is enabled.
 **Default: false**
 
 #### minScrollSize
@@ -237,7 +253,7 @@ It allows to scroll to the right of `ScrollArea` component.
 It moves horizontal scrollbar. `leftPosition` is a distance between left edge of `scrollArea` container and left edge of `scrollArea` content.  
 
 # Change log
-Every release is documented on the Github [Releases](https://github.com/souhe/reactScrollbar/releases) page. 
+Every release is documented on the Github [Releases](https://github.com/souhe/reactScrollbar/releases) page.
 
 # License
 MIT

examples/js/changing-children.jsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React from 'react';
+import PropTypes from 'prop-types';
 import ScrollArea from 'react-scrollbar';
 
 class ChangingChildren extends React.Component{
@@ -52,31 +53,31 @@ class Content extends React.Component {
                 <button onClick={this.handleAddButtonClick.bind(this)} >Add 10</button>
                 <button onClick={this.handleRemoveButtonClick.bind(this)} >Remove 10</button>
                 <button onClick={this.handleScrollTopButtonClick.bind(this)} > Scroll Top </button>
-                
+
             </div>
         );
     }
-    
+
     handleScrollTopButtonClick() {
         this.context.scrollArea.scrollTop();
     }
-    
+
     handleScrollBottomButtonClick() {
         this.context.scrollArea.scrollBottom();
     }
-    
+
     handleScroll100ButtonClick() {
         this.context.scrollArea.scrollXTo(100);
     }
-    
+
     handleScrollLeftButtonClick() {
         this.context.scrollArea.scrollLeft();
     }
-    
+
     handleScrollRightButtonClick() {
         this.context.scrollArea.scrollRight();
     }
-    
+
     handleScrollY40ButtonClick() {
         this.context.scrollArea.scrollYTo(40);
     }
@@ -91,7 +92,7 @@ class Content extends React.Component {
 }
 
 Content.contextTypes = {
-    scrollArea: React.PropTypes.object
+    scrollArea: PropTypes.object
 };
 
 export default ChangingChildren;

package.json

@@ -4,6 +4,7 @@
   "description": "ScrollArea component for react",
   "main": "./dist/scrollArea.js",
   "scripts": {
+    "start": "gulp build && gulp watch",
     "test": "./node_modules/.bin/karma start karma.config.js --single-run --browsers PhantomJS"
   },
   "repository": {
@@ -21,10 +22,12 @@
   "author": "souhe",
   "license": "MIT",
   "dependencies": {
+    "classnames": "^2.2.5",
     "config": "^1.24.0",
     "line-height": "^0.1.1",
-    "react": "^15.4.1",
-    "react-motion": "^0.4.3"
+    "prop-types": "^15.5.7",
+    "react": "^15.5.4",
+    "react-motion": "^0.4.7"
   },
   "devDependencies": {
     "babel": "^6.5.2",
@@ -58,7 +61,7 @@
     "object-assign": "^4.0.1",
     "phantomjs-prebuilt": "^2.1.3",
     "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.4.1",
+    "react-dom": "^15.5.4",
     "run-sequence": "^1.1.4",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.2",

src/js/ScrollArea.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ScrollBar from './Scrollbar';
 import {findDOMNode, warnAboutFunctionChild, warnAboutElementChild, positiveOrZero, modifyObjValues} from './utils';
 import lineHeight from 'line-height';
 import {Motion, spring} from 'react-motion';
+import classNames from 'classnames';
 
 const eventTypes = {
     wheel: 'wheel',
@@ -97,7 +99,9 @@ export default class ScrollArea extends React.Component {
                 position={this.state.topPosition}
                 onMove={this.handleScrollbarMove.bind(this)}
                 onPositionChange={this.handleScrollbarYPositionChange.bind(this)}
+                containerClassName={this.props.verticalContainerClassName}
                 containerStyle={this.props.verticalContainerStyle}
+                scrollbarClassName={this.props.verticalScrollbarClassName}
                 scrollbarStyle={this.props.verticalScrollbarStyle}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
@@ -113,7 +117,9 @@ export default class ScrollArea extends React.Component {
                 position={this.state.leftPosition}
                 onMove={this.handleScrollbarMove.bind(this)}
                 onPositionChange={this.handleScrollbarXPositionChange.bind(this)}
+                containerClassName={this.props.horizontalContainerClassName}
                 containerStyle={this.props.horizontalContainerStyle}
+                scrollbarClassName={this.props.horizontalScrollbarClassName}
                 scrollbarStyle={this.props.horizontalScrollbarStyle}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
@@ -128,8 +134,8 @@ export default class ScrollArea extends React.Component {
             warnAboutElementChild();
         }
 
-        let classes = 'scrollarea ' + (className || '');
-        let contentClasses = 'scrollarea-content ' + (contentClassName || '');
+        let classes = classNames('scrollarea', className);
+        let contentClasses = classNames('scrollarea-content', contentClassName);
 
         let contentStyle = {
             marginTop: -this.state.topPosition,
@@ -446,29 +452,33 @@ export default class ScrollArea extends React.Component {
 }
 
 ScrollArea.childContextTypes = {
-    scrollArea: React.PropTypes.object
+    scrollArea: PropTypes.object
 };
 
 ScrollArea.propTypes = {
-    className: React.PropTypes.string,
-    style: React.PropTypes.object,
-    speed: React.PropTypes.number,
-    contentClassName: React.PropTypes.string,
-    contentStyle: React.PropTypes.object,
-    vertical: React.PropTypes.bool,
-    verticalContainerStyle: React.PropTypes.object,
-    verticalScrollbarStyle: React.PropTypes.object,
-    horizontal: React.PropTypes.bool,
-    horizontalContainerStyle: React.PropTypes.object,
-    horizontalScrollbarStyle: React.PropTypes.object,
-    onScroll: React.PropTypes.func,
-    contentWindow: React.PropTypes.any,
-    ownerDocument: React.PropTypes.any,
-    smoothScrolling: React.PropTypes.bool,
-    minScrollSize: React.PropTypes.number,
-    swapWheelAxes: React.PropTypes.bool,
-    stopScrollPropagation: React.PropTypes.bool,
-    focusableTabIndex: React.PropTypes.number
+    className: PropTypes.string,
+    style: PropTypes.object,
+    speed: PropTypes.number,
+    contentClassName: PropTypes.string,
+    contentStyle: PropTypes.object,
+    vertical: PropTypes.bool,
+    verticalContainerClassName: PropTypes.string,
+    verticalContainerStyle: PropTypes.object,
+    verticalScrollbarClassName: PropTypes.string,
+    verticalScrollbarStyle: PropTypes.object,
+    horizontal: PropTypes.bool,
+    horizontalContainerClassName: PropTypes.string,
+    horizontalContainerStyle: PropTypes.object,
+    horizontalScrollbarClassName: PropTypes.string,
+    horizontalScrollbarStyle: PropTypes.object,
+    onScroll: PropTypes.func,
+    contentWindow: PropTypes.any,
+    ownerDocument: PropTypes.any,
+    smoothScrolling: PropTypes.bool,
+    minScrollSize: PropTypes.number,
+    swapWheelAxes: PropTypes.bool,
+    stopScrollPropagation: PropTypes.bool,
+    focusableTabIndex: PropTypes.number
 };
 
 ScrollArea.defaultProps = {

src/js/Scrollbar.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {Motion, spring} from 'react-motion';
 import {modifyObjValues} from './utils';
+import classNames from 'classnames';
 
 class ScrollBar extends React.Component {
     constructor(props){
@@ -59,25 +61,38 @@ class ScrollBar extends React.Component {
     }
 
     render(){
-        let {smoothScrolling, isDragging, type, scrollbarStyle, containerStyle} = this.props;
-        let isVoriziontal = type === 'horizontal';
+        let {
+          smoothScrolling, isDragging, type,
+          containerClassName, containerStyle,
+          scrollbarClassName, scrollbarStyle,
+        } = this.props;
+        let isHorizontal = type === 'horizontal';
         let isVertical = type === 'vertical';
         let scrollStyles = this.createScrollStyles();
         let springifiedScrollStyles = smoothScrolling ? modifyObjValues(scrollStyles, x => spring(x)) : scrollStyles;
 
-        let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`;
+        const containerClassNames = classNames(
+          'scrollbar-container',
+          {
+            active: isDragging,
+            horizontal: isHorizontal,
+            vertical: isVertical,
+          },
+          containerClassName,
+        );
+        const scrollbarClassNames = classNames('scrollbar', scrollbarClassName);
 
         return (
             <Motion style={springifiedScrollStyles}>
                 { style =>
                     <div
-                        className={scrollbarClasses}
+                        className={containerClassNames}
                         style={containerStyle}
                         onMouseDown={this.handleScrollBarContainerClick.bind(this)}
                         ref={ x => this.scrollbarContainer = x }
                     >
                         <div
-                            className="scrollbar"
+                            className={scrollbarClassNames}
                             style={{ ...scrollbarStyle, ...style }}
                             onMouseDown={this.handleMouseDown.bind(this)}
                         />
@@ -161,18 +176,20 @@ class ScrollBar extends React.Component {
 }
 
 ScrollBar.propTypes = {
-    onMove: React.PropTypes.func,
-    onPositionChange: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    realSize: React.PropTypes.number,
-    containerSize: React.PropTypes.number,
-    position: React.PropTypes.number,
-    containerStyle: React.PropTypes.object,
-    scrollbarStyle: React.PropTypes.object,
-    type: React.PropTypes.oneOf(['vertical', 'horizontal']),
-    ownerDocument: React.PropTypes.any,
-    smoothScrolling: React.PropTypes.bool,
-    minScrollSize: React.PropTypes.number
+    onMove: PropTypes.func,
+    onPositionChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    realSize: PropTypes.number,
+    containerSize: PropTypes.number,
+    position: PropTypes.number,
+    containerClassName: PropTypes.string,
+    containerStyle: PropTypes.object,
+    scrollbarClassName: PropTypes.string,
+    scrollbarStyle: PropTypes.object,
+    type: PropTypes.oneOf(['vertical', 'horizontal']),
+    ownerDocument: PropTypes.any,
+    smoothScrolling: PropTypes.bool,
+    minScrollSize: PropTypes.number
 };
 
 ScrollBar.defaultProps = {

src/js/utils.js

@@ -38,7 +38,7 @@ export function modifyObjValues (obj, modifier = x => x){
     for(let key in obj){
         if(obj.hasOwnProperty(key)) modifiedObj[key] = modifier(obj[key]);
     }
-    
+
     return modifiedObj;
 }
 

test/scrollArea.spec.js

@@ -59,7 +59,7 @@ describe('ScrollArea component', () => {
         expect(content).toEqualJSX(
             <div ref={() => {}}
                 style={{}}
-                className="scrollarea-content "
+                className="scrollarea-content"
                 onTouchStart={() => {}}
                 onTouchMove={() => {}}
                 onTouchEnd={() => {}}
@@ -78,7 +78,7 @@ describe('ScrollArea component', () => {
             <div ref={() => {}}
                 style={{}}
                 tabIndex={100}
-                className="scrollarea-content "
+                className="scrollarea-content"
                 onTouchStart={() => {}}
                 onTouchMove={() => {}}
                 onTouchEnd={() => {}}
@@ -118,6 +118,25 @@ describe('ScrollArea component', () => {
         expect(content.props.style).toEqual({ test: 'contentStyle' });
     });
 
+    it('Should have proper scrollbars classes', () => {
+        let {scrollbars} = setupComponentWithMockedSizes({
+            vertical: true,
+            verticalContainerClassName: 'verticalContainerClassName',
+            verticalScrollbarClassName: 'verticalScrollbarClassName',
+            horizontal: true,
+            horizontalContainerClassName: 'horizontalContainerClassName',
+            horizontalScrollbarClassName: 'horizontalScrollbarClassName',
+        });
+
+        let verticalScrollbar = scrollbars.filter(component => component.props.type === 'vertical')[0];
+        let horizontalScrollbar = scrollbars.filter(component => component.props.type === 'horizontal')[0];
+
+        expect(verticalScrollbar.props.containerClassName).toInclude('verticalContainerClassName');
+        expect(verticalScrollbar.props.scrollbarClassName).toInclude('verticalScrollbarClassName');
+        expect(horizontalScrollbar.props.containerClassName).toInclude('horizontalContainerClassName');
+        expect(horizontalScrollbar.props.scrollbarClassName).toInclude('horizontalScrollbarClassName');
+    });
+
     it('Should have proper scrollbars styles', () => {
         let {content, scrollbars} = setupComponentWithMockedSizes({
             vertical: true,