Add customizable classnames for bar and container

Author: avanes

README.md

@@ -91,6 +91,8 @@ then open [http://localhost:8003](http://localhost:8003).
         className={String}
         style={Object}
         contentClassName={String}
+        containerClassName={String}
+        scrollbarClassName={String}
         contentStyle={Object}
         horizontal={Boolean}
         horizontalContainerStyle={Object}
@@ -132,6 +134,12 @@ Inline styles applied to the main scroll area component.
 #### contentClassName
 CSS class names added to element with scroll area content.
 
+#### containerClassName
+CSS class name added to scrollbar container element.
+
+#### scrollbarClassName
+CSS class name added to scrollbar element.
+
 #### contentStyle
 Inline styles applied to element with scroll area content.
 

src/js/ScrollArea.jsx

@@ -99,6 +99,8 @@ export default class ScrollArea extends React.Component {
                 onPositionChange={this.handleScrollbarYPositionChange.bind(this)}
                 containerStyle={this.props.verticalContainerStyle}
                 scrollbarStyle={this.props.verticalScrollbarStyle}
+                className={this.props.scrollbarClassName}
+                containerClassName={this.props.containerClassName}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
                 onFocus={this.focusContent.bind(this)}
@@ -115,6 +117,8 @@ export default class ScrollArea extends React.Component {
                 onPositionChange={this.handleScrollbarXPositionChange.bind(this)}
                 containerStyle={this.props.horizontalContainerStyle}
                 scrollbarStyle={this.props.horizontalScrollbarStyle}
+                className={this.props.scrollbarClassName}
+                containerClassName={this.props.containerClassName}
                 smoothScrolling={withMotion}
                 minScrollSize={this.props.minScrollSize}
                 onFocus={this.focusContent.bind(this)}
@@ -454,6 +458,8 @@ ScrollArea.propTypes = {
     style: React.PropTypes.object,
     speed: React.PropTypes.number,
     contentClassName: React.PropTypes.string,
+    scrollbarClassName: React.PropTypes.string,
+    containerClassName: React.PropTypes.string,
     contentStyle: React.PropTypes.object,
     vertical: React.PropTypes.bool,
     verticalContainerStyle: React.PropTypes.object,

src/js/Scrollbar.jsx

@@ -59,13 +59,13 @@ class ScrollBar extends React.Component {
     }
 
     render(){
-        let {smoothScrolling, isDragging, type, scrollbarStyle, containerStyle} = this.props;
+        let {smoothScrolling, isDragging, type, scrollbarStyle, className, containerStyle, containerClassName} = this.props;
         let isVoriziontal = 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' : ''}`;
+        let scrollbarClasses = `scrollbar-container ${containerClassName || ''} ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`;
 
         return (
             <Motion style={springifiedScrollStyles}>
@@ -77,7 +77,7 @@ class ScrollBar extends React.Component {
                         ref={ x => this.scrollbarContainer = x }
                     >
                         <div
-                            className="scrollbar"
+                            className={`scrollbar ${className || ''}`}
                             style={{ ...scrollbarStyle, ...style }}
                             onMouseDown={this.handleMouseDown.bind(this)}
                         />
@@ -167,6 +167,8 @@ ScrollBar.propTypes = {
     realSize: React.PropTypes.number,
     containerSize: React.PropTypes.number,
     position: React.PropTypes.number,
+    className: React.PropTypes.string,
+    containerClassName: React.PropTypes.string,
     containerStyle: React.PropTypes.object,
     scrollbarStyle: React.PropTypes.object,
     type: React.PropTypes.oneOf(['vertical', 'horizontal']),