Version 0.2.0

.babelrc

@@ -0,0 +1,15 @@
+{
+    "env": {
+        "development": {
+            "presets": ["es2015", "stage-0", "react"]
+        },
+        "build": {
+            "presets": ["es2015", "stage-0", "react"],
+            "ignore": [
+                "**/__tests__/*.js",
+                "**/fake-*"
+            ]
+        }
+
+    }
+}

.eslintignore

@@ -1,3 +1,3 @@
-coverage
-demo
-dist
+/coverage
+/demo
+/dist

.eslintrc.js

@@ -0,0 +1,62 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "__BROWSER__": true,
+        "__dirname": true,
+        "__x": true,
+        "global": true,
+        "module": true,
+        "process": true,
+        "require": true,
+        "Buffer": true,
+        "DocumentTouch": true
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "eol-last": [
+            "error",
+            "always"
+        ],
+        "indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1
+            }
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "no-case-declarations": [
+            0
+        ],
+        "no-empty": [
+            "error",
+            {
+                "allowEmptyCatch": true
+            }
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+};

.gitignore

@@ -25,3 +25,5 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+dist/module/

.npmignore

@@ -0,0 +1,40 @@
+# Thank you : https://github.com/github/gitignore/blob/master/Node.gitignore
+
+# source
+src
+
+# Storybook
+stories
+storybook-static
+
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules
+modules
+docs/html
+
+# Users Environment Variables
+.lock-wscript
+
+.DS_Store
+*.tgz

.travis.yml

@@ -1,5 +1,8 @@
 language: node_js
 node_js:
-    - "4.4"
-before_script:
-    - npm install
+    - '6.10'
+install:
+    - 'npm install'
+script:
+    - npm run build
+    - npm test

CHANGELOG.md

@@ -1,3 +1,18 @@
+## v0.2.0 - 2017-05-12
+
+- Upgrade to React 15.5
+- Babel 6
+- Webpack 2
+- Convert from createClass to ES6 class
+- Modularize
+- Test Travis CI in Node 6.10
+- Update linting
+- Change `nodeName` to `component` and allow for more than string tags
+- Fix bug in cushion handling
+- Add support for `imgWrapperComponent` which renders given component around all noscripted img childs
+- No longer expose `verge`
+
+
 ## v0.1.0 - 2016-04-11
 
 - Upgrade to React 0.14

README.md

@@ -3,8 +3,8 @@
 [![Build Status](https://travis-ci.org/Merri/react-lazy.svg)](https://travis-ci.org/Merri/react-lazy)
 
 Lazy loader container element that triggers load when element comes into view. Provides fallback for SEO and no-JS by
-using a `noscript` element, a unique feature compared to other solutions. This means your images and/or content can be
-crawled by search engines that are not JavaScript aware. Also means this component supports isomorphic rendering.
+using a `noscript` element. This means your images and/or content can be crawled by search engines that are not
+JavaScript aware. Also means this component supports universal rendering (isomorphic JS).
 
 Works for **both vertical and horizontal scrolling**, which is also unlike some other solutions.
 
@@ -25,7 +25,7 @@ A sample for targetting a single image. You are encouraged to give the container
 be seen in the CSS below.
 
 ```css
-/* SAMPLE CSS */
+/* sample of traditional CSS centered thumbnail styling */
 .image-link {
     display: inline-block;
     margin: 5px;
@@ -48,15 +48,11 @@ be seen in the CSS below.
 ```
 
 ```jsx
-// ES2015
-import {Lazy} from 'react-lazy'
-// or ES5
-var reactLazy = require('react-lazy')
-var Lazy = reactLazy.Lazy
+import { Lazy } from 'react-lazy'
 
 ...
 
-    <Lazy nodeName="a" href="/" className="image-link image-link--100px">
+    <Lazy component="a" href="/" className="image-link image-link--100px">
         <img alt="My Lazy Loaded Image" className="image-link__image" src="my-lazy-loaded-image.png" />
     </Lazy>
 ```
@@ -71,7 +67,7 @@ var Lazy = reactLazy.Lazy
 </a>
 ```
 
-## Why IE conditional comments?
+### Why IE conditional comments?
 
 You probably develop your site in a way that your scripts don't really run on Internet Explorer 8. Maybe you see just
 enough trouble to make things render and work just enough that IE8 user can browse around without things being unusably
@@ -83,8 +79,7 @@ This component **does not** support lazy loading in any form in Internet Explore
 
 ## Other features
 
-`react-lazy` exposes [verge](https://github.com/ryanve/verge), you can use it with
-`import {verge} from 'react-lazy'` or `var verge = require('react-lazy').verge`
+### `cushion`
 
 You can apply "cushion" around elements so they are loaded slighly before coming into the actual viewport:
 
@@ -93,17 +88,62 @@ You can apply "cushion" around elements so they are loaded slighly before coming
 <Lazy cushion={100}>...</Lazy>
 ```
 
+### `imgWrapperComponent`
+
+Allows you to toggle a render where given component is rendered around all contained img elements, while still rendering
+all the other children as usual.
+
+```jsx
+<Lazy component="ul" className="thumbnail-list" imgWrapperComponent={MyThumbnailPlaceholder}>
+    {imagesWithProps.map((props, index) =>
+        <li key={index} className="thumbnail-list__item"><img {...props} /></li>
+    )}
+</Lazy>
+```
+
+Will result in HTML like:
+
+```html
+<ul class="thumbnail-list">
+    <li class="thumbnail-list__item">
+        <div class="my-thumbnail-placeholder">
+            <!--[if IE 9]><!--><noscript><!--<![endif]-->
+                <img alt="My Image" class="my-thumbnail" src="my-image.png" />
+            <!--[if IE 9]><!--></noscript><!--<![endif]-->
+        </div>
+    </li>
+</ul>
+```
+
+Which will change to a DOM tree like this when coming into viewport:
+
+```html
+<ul class="thumbnail-list">
+    <li class="thumbnail-list__item">
+        <img alt="My Image" class="my-thumbnail" src="my-image.png" />
+    </li>
+</ul>
+```
+
+You can also have Lazy containers inside Lazy containers.
+
+Note that component given to `imgWrapperComponent` will have any of it's own children overwritten.
+
+### `onLoad`
+
 You can also get notified on just before lazy load switch render happens:
 
 ```jsx
 <Lazy onLoad={yourCustomFunction}>...</Lazy>
 ```
 
+### `checkElementsInViewport`
+
 Finally, you can also manually trigger checking for elements in viewport, which can be useful if you toggle element
 resize (which won't cause resize or scroll events). Or you can use setInterval if you want to be very lazy.
 
 ```js
-import {checkElementsInViewport} from 'react-lazy'
+import { checkElementsInViewport } from 'react-lazy'
 
 // now you're being a very lazy dev...
 setInterval(checkElementsInViewport, 250)
@@ -112,9 +152,8 @@ setInterval(checkElementsInViewport, 250)
 ## Developing
 
 ```
-git clone git@github.com:merri/react-lazy.git
-cd react-lazy
 npm install
+npm run build
 npm test
 ```
 

demo/app.js

@@ -1,5 +1,5 @@
 (function() {
-    var Lazy = React.createFactory(window.Lazy)
+    var Lazy = React.createFactory(window.ReactLazy.Lazy)
 
     var TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 
@@ -128,5 +128,5 @@
         }
     })
 
-    React.render(React.createElement(Demo), document.getElementById('app'))
-})()
+    ReactDOM.render(React.createElement(Demo), document.getElementById('app'))
+})()

index.html

@@ -106,10 +106,10 @@ <h1>React Lazy Demo</h1>
                 </span> npm: react-lazy</a>
             </nav>
         </footer>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom-server.min.js"></script>
-        <script src="./dist/react-lazy.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom-server.min.js"></script>
+        <script src="./dist/umd/react-lazy.js"></script>
         <script src="./demo/app.js"></script>
     </body>
 </html>