init

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+      "react",
+      "es2015"
+  ],
+  "ignore": [
+    "node_modules"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

index.jsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+
+const DEFAULT_BLUR_LEVEL = 25;
+const DEFAULT_TRANSITION_TIME = 400;
+const DEFAULT_STEP_TIME = 10;
+const DEFAULT_TRANSITION_DELAY = 300;
+
+class DefaultLoader extends React.Component{
+    render(){
+        return <div className="bil-default-loader"></div>
+    }
+}
+
+class SvgContainer extends React.Component{
+
+    constructor(props){
+        super();
+        this.state = {
+            blurLevel: props.maxBlurLevel || DEFAULT_BLUR_LEVEL,
+            blurImageOpacity: 1
+        }
+    }
+
+    componentDidMount(){
+        if(this.props.transitionTime){
+            let stepTime = DEFAULT_STEP_TIME;
+            let remainTime = this.props.transitionTime;
+            setTimeout(()=>{
+                let timer = setInterval(()=>{
+                    if(remainTime <= 0){
+                        window.clearInterval(timer);
+                    }else{
+                        let percent = Math.max(0, ((remainTime - stepTime) / remainTime));
+                        let currentBlurLevel = this.state.blurImageOpacity * percent;
+                        remainTime = remainTime - stepTime;
+                        this.setState({
+                            blurImageOpacity: currentBlurLevel
+                        })
+                    }
+                }, stepTime)
+            }, DEFAULT_TRANSITION_DELAY)
+
+        }
+    }
+
+    render(){
+        return <svg width="100%" height="100%" className="bil-svg-container" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            <filter id="bilBlurFilter">
+                <feGaussianBlur in="SourceGraphic" stdDeviation={this.state.blurLevel} />
+            </filter>
+
+            <image xlinkHref={this.props.src} 
+                   x="0" y="0" 
+                   width="100%" 
+                   height="100%" 
+                   filter="url(#bilBlurFilter)" 
+                   style={{opacity: this.state.blurImageOpacity}}
+                   preserveAspectRatio={this.props.fullCover ? "xMidYMid slice" : null}/>
+
+            { this.props.transitionTime ? <image xlinkHref={this.props.src} 
+                   x="0" y="0" 
+                   width="100%" 
+                   height="100%"
+                   style={{opacity: 1-this.state.blurImageOpacity}}
+                   preserveAspectRatio={this.props.fullCover ? "xMidYMid slice" : null}/>
+                : null}
+        </svg>
+    }
+}
+
+class BlurImageLoader extends React.Component{
+    constructor(props){
+        super();
+        this.state = {
+            showPreview: false,
+            showLoader: true,
+            showImage: false,
+            transitionTime: props.transitionTime || DEFAULT_TRANSITION_TIME
+        }
+    }
+
+    resetState(){
+        this.setState({
+            showPreview: false,
+            showLoader: true,
+            showImage: false
+        })
+    }
+
+    loadImage(src,preview){
+        this.resetState();
+        if(src){
+            let image = new Image();
+            image.onload = ()=>{
+                this.setState({
+                    showPreview: false,
+                    showLoader: false,
+                    showImage: true
+                })
+            };
+            image.src = src
+        }
+
+        if(preview){
+            let image = new Image();
+            image.onload = ()=>{
+                this.setState({
+                    showPreview: !this.state.showImage,
+                    showLoader: false
+                })
+            }
+            image.src = preview;
+        }
+    }
+
+    componentWillReceiveProps({src,preview}){
+        this.loadImage(src,preview);
+    }
+
+    componentWillMount(){
+        this.loadImage(this.props.src,this.props.preview);
+    }
+
+    render(){
+        return <div className="bil-image">
+            { this.state.showImage ? <SvgContainer src={this.props.src} 
+                                                   fullCover={this.props.fullCover} 
+                                                   maxBlurLevel={this.props.maxBlurLevel}
+                                                   transitionTime={this.state.transitionTime}/> 
+                                     : null }
+            { this.state.showPreview ? <SvgContainer src={this.props.preview} 
+                                                     fullCover={this.props.fullCover} 
+                                                     maxBlurLevel={this.props.maxBlurLevel}/> 
+                                     : null }
+            { this.state.showLoader ? <DefaultLoader /> : null }
+        </div>
+    }
+}
+
+BlurImageLoader.propTypes = {
+    src: React.PropTypes.string.isRequired,
+    preview: React.PropTypes.string,
+    fullCover: React.PropTypes.bool,
+    maxBlurLevel: React.PropTypes.number,
+    transitionTime: React.PropTypes.number
+}
+
+export default BlurImageLoader;

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-blur-image-loader",
+  "version": "0.0.1",
+  "description": "",
+  "main": "BlurImageLoader.jsx",
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "css-loader": "^0.27.3",
+    "style-loader": "^0.16.0",
+    "webpack": "^2.3.1",
+    "webpack-dev-server": "^2.4.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev-server": "webpack-dev-server --config webpack.dev.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MarkoCen/react-blur-image-loader.git"
+  },
+  "author": "Marko Cen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/MarkoCen/react-blur-image-loader/issues"
+  },
+  "homepage": "https://github.com/MarkoCen/react-blur-image-loader#readme"
+}

styles.css

@@ -0,0 +1,29 @@
+.bil-image{
+    display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	-webkit-box-align: center;
+
+	align-items: center;
+    justify-content: center;
+
+    height: 100%;
+    width: 100%;
+}
+
+.bil-default-loader{
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #555;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: bil-default-spin 1s linear infinite;
+}
+
+@keyframes bil-default-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

test/test.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+    </head>
+    <body>
+        <div id="root" style="width:400px;height:300px;"></div>
+        <script src='bundle.js'></script>
+    </body>
+</html>

test/test.jsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import {render} from 'react-dom';
+import BlurImageLoader from '../index.jsx';
+import "../styles.css";
+
+render(<BlurImageLoader fullCover={true} src={"http://i.imgur.com/RRUe0Mo.png"}/>, document.querySelector("#root"));

webpack.dev.js

@@ -0,0 +1,25 @@
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+    entry: './test/test.jsx',
+    output: {
+        path: path.resolve(__dirname, './test'),
+        filename: 'bundle.js'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.css']
+    },
+    module: {
+        loaders: [
+            { test: /\.jsx?$/, loader: 'babel-loader'},
+            { test: /\.css$/, loader: 'style-loader!css-loader'}
+        ]
+    },
+    devServer: {
+        contentBase: path.join(__dirname, "test"),
+        // publicPath: "/test/",
+        compress: true,
+        port: 9000
+    }
+}