Exclude inner wrap element from component

Component solve only default behavior. “Fill space with div, which
content will be scrollable”
If you want to have horizontal scrolling, or custom styling you can
wrap content of component to your own div.
You can still overwrite iscroll element styles or add custom class with
style and className properties on component.

Author: David Schovanec

README.md

@@ -179,6 +179,31 @@ You can pass `true` as first argument for call callback after iscroll is initial
   }
 ```
 
+## Horizonzal scroll
+
+Common usecase of horizontal scrolling
+
+```js
+var React = require('react'),
+    ReactIScroll = require('react-iscroll'),
+    iScroll = require('iscroll');
+
+var HorizontalScroll = React.createClass({
+  render: function() {
+    return (
+      <ReactIScroll iscroll={iScroll}
+                    options={{mouseWheel: true, scrollbars: true, scrollX: true}}>
+        <div style={{width:'200%'}}>
+          <ul>
+            {listOfLi}
+          </ul>
+        </div>
+      </ReactIScroll>
+    )
+  }
+})
+```
+
 ## Example
 
 There is example application. You can run it with this commands:

example/example.css

@@ -98,6 +98,11 @@ li {
   border-top: 1px solid #fff;
   background-color: #fafafa;
   font-size: 14px;
+
+}
+
+.beyond {
+  float: right;
 }
 
 .button {

example/example.js

@@ -75,7 +75,7 @@ class Example extends React.Component {
     let i = 0;
 
     for(i; i < len; i++) {
-      listOfLi.push(<li key={i}>Pretty row {this.state.list[i]}</li>)
+      listOfLi.push(<li key={i}>Pretty row {this.state.list[i]}<span className="beyond">I'm beyond</span></li>)
     }
 
     return (
@@ -89,11 +89,12 @@ class Example extends React.Component {
                         options={IScrollOptions}
                         onRefresh={this.onScrollRefresh}
                         onScrollStart={this.onScrollStart}
-                        onScrollEnd={this.onScrollEnd}
-                        scrollerStyle={{width: "200%"}}>
-            <ul>
-              {listOfLi}
-            </ul>
+                        onScrollEnd={this.onScrollEnd}>
+            <div style={{width: "110%"}}>
+              <ul>
+                {listOfLi}
+              </ul>
+            </div>
           </ReactIScroll>
         </div>
         <div id="footer">

src/react-iscroll.jsx

@@ -236,12 +236,15 @@ export default class ReactIScroll extends React.Component {
   }
 
   render() {
-    return (
-      <div className={this.props.className} style={this.props.style}>
-        <div style={this.props.scrollerStyle}>
-          {this.props.children}
-        </div>
-      </div>
-    )
+    // Keep only html properties
+    const htmlProps = {}
+
+    for(const prop in this.props) {
+      if(!propTypes[prop]) {
+        htmlProps[prop] = this.props[prop]
+      }
+    }
+
+    return <div {...htmlProps} />
   }
 }