v 0.1.0 - loader prop takes a React component

Author: guillaumervls

.gitattributes

@@ -0,0 +1 @@
+dist/** -diff merge=binary

README.md

@@ -3,7 +3,7 @@ React Infinite Scroll
 
 *React infinite scroll component*
 
-Demo: http://jsfiddle.net/mb9vJ/
+Demo: http://jsfiddle.net/mb9vJ/1
 
 # Getting started
 
@@ -50,22 +50,26 @@ In this case, it will depend on `react`.
                 which means that for the first loading, `loadMore` will be called with `1`
 
 - `loadMore(pageToLoad)` : This function is called when the user scrolls down
-                               and we need to load stuff
+                           and we need to load stuff
 
 - `hasMore` : Boolean stating if we should keep listening to scroll event and
-                   trying to load more stuff
+              trying to load more stuff
 
-- `loader` : Loader element to be displayed while loading stuff, can be provided as :
-
-    * an component consrtuctor : i.e. `React.DOM.div` (or a component of yours)
-    * an object, for more customization :
-    `{component:React.DOM.div, props:{className:'loader'}, children:'Loading ...'}`
+- `loader` : Loader element to be displayed while loading stuff
 
 - `threshold` : The distance between the bottom of the page and the bottom of the 
                 window's viewport that triggers the loading of new stuff - 
                 *Defaults to `250`*
 
 
+## Changelog
+
+### v0.1.0
+
+`loader` now takes a React component
+(no more component constructor or object `{component:... , props:... , ...}`).
+
+
 ## (Re)build
 
 ```

dist/react-infinite-scroll.min.js

@@ -36,18 +36,14 @@
     render: function () {
       console.log('render');
       return React.addons.InfiniteScroll({
-        loader: {
-          component: React.DOM.div,
-          props: {
+        loader: React.DOM.div({
             className: 'loader'
-          },
-          children: 'Loading ...'
-        },
+          }, 'Loading...'),
         loadMore: this.loadMore,
         hasMore: this.state.hasMore
       }, React.DOM.div.apply(null, [null].concat(this.state.items)));
     }
   });
   React.renderComponent(Wrapper(), document.body);
 </script>
-</html>
+</html >

example/example.html

@@ -1,6 +1,6 @@
 {
   "name": "react-infinite-scroll",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "",
   "main": "src/react-infinite-scroll.js",
   "scripts": {

package.json

@@ -16,7 +16,6 @@ module.exports = function (React) {
         pageStart: 0,
         hasMore: false,
         loadMore: function () {},
-        loader: React.DOM.span,
         threshold: 250
       };
     },
@@ -30,14 +29,8 @@ module.exports = function (React) {
       this.attachScrollListener();
     },
     render: function () {
-      var loaderProp = this.props.loader,
-        loaderElmt;
-      if (typeof loaderProp === 'function') {
-        loaderElmt = loaderProp();
-      } else if (typeof loaderProp === 'object') {
-        loaderElmt = loaderProp.component(loaderProp.props, loaderProp.children);
-      }
-      return React.DOM.div(null, this.props.children, this.props.hasMore && loaderElmt);
+      var props = this.props;
+      return React.DOM.div(null, props.children, props.hasMore && props.loader);
     },
     scrollListener: function () {
       var el = this.getDOMNode();