souhe · qodunpob · Apr 10, 2017
diff --git a/README.md b/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
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "author": "souhe",
   "license": "MIT",
   "dependencies": {
+    "classnames": "^2.2.5",
     "config": "^1.24.0",
     "line-height": "^0.1.1",
     "react": "^15.4.1",

diff --git a/src/js/ScrollArea.jsx b/src/js/ScrollArea.jsx
@@ -3,6 +3,7 @@ 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 +98,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 +116,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 +133,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,
@@ -456,10 +461,14 @@ ScrollArea.propTypes = {
     contentClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
     vertical: React.PropTypes.bool,
+    verticalContainerClassName: React.PropTypes.string,
     verticalContainerStyle: React.PropTypes.object,
+    verticalScrollbarClassName: React.PropTypes.string,
     verticalScrollbarStyle: React.PropTypes.object,
     horizontal: React.PropTypes.bool,
+    horizontalContainerClassName: React.PropTypes.string,
     horizontalContainerStyle: React.PropTypes.object,
+    horizontalScrollbarClassName: React.PropTypes.string,
     horizontalScrollbarStyle: React.PropTypes.object,
     onScroll: React.PropTypes.func,
     contentWindow: React.PropTypes.any,

diff --git a/src/js/Scrollbar.jsx b/src/js/Scrollbar.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Motion, spring} from 'react-motion';
 import {modifyObjValues} from './utils';
+import classNames from 'classnames';
 
 class ScrollBar extends React.Component {
     constructor(props){
@@ -59,25 +60,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)}
                         />
@@ -167,7 +181,9 @@ ScrollBar.propTypes = {
     realSize: React.PropTypes.number,
     containerSize: React.PropTypes.number,
     position: React.PropTypes.number,
+    containerClassName: React.PropTypes.string,
     containerStyle: React.PropTypes.object,
+    scrollbarClassName: React.PropTypes.string,
     scrollbarStyle: React.PropTypes.object,
     type: React.PropTypes.oneOf(['vertical', 'horizontal']),
     ownerDocument: React.PropTypes.any,

diff --git a/test/scrollArea.spec.js b/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,