better demo and gif

CannerCMS · Mar 8, 2018 · b33f373 · b33f373
1 parent 313ff92
commit b33f373
Show file tree

Hide file tree

Showing 6 changed files with 1,180 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
 # react-loading-image [![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url]
 > A react image loader component
 
+![preview](./docs/image-loader.gif)
+
+
 ## Installation
 
 ```sh

diff --git a/docs/image-loader.gif b/docs/image-loader.gif
diff --git a/docs/index.js b/docs/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {Input, Icon, Alert} from 'antd';
 import styled from 'styled-components';
 import ImageLoader from '../src';
 
+import "antd/dist/antd.css";
+
 const PreviewImg = styled.div`
   background-image: url(${props => props.src});
   width: 100%;
@@ -29,19 +32,28 @@ class Demo extends React.Component {
   render() {
     const {value} = this.state;
     return (
-      <div>
+      <div style={{padding: '20px'}}>
         <h1>Copy a image URL here</h1>
-        <input onChange={this.onChange}/>
-        <p>
-          value: {value}
-        </p>
-        <div>
+        <Input onChange={this.onChange} placeholder="Your image url here"/>
+
+        <div style={{marginTop: '10px'}}>
           {value && (
             <ImageLoader
               src={value}
               image={props => <PreviewImg {...props}/>}
-              loading={() => <div>Loading...</div>}
-              error={() => <div>Error</div>}
+              error={() => (
+                <Alert
+                  message="Please check if your image url is valid"
+                  type="error"
+                />
+              )}
+              loading={() => {
+                return (
+                  <div>
+                    <Icon type="loading" style={{ fontSize: 24 }} spin />
+                  </div>
+                );
+              }}
               />
           )}
         </div>

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     ""
   ],
   "devDependencies": {
+    "antd": "^3.2.3",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
     "babel-eslint": "^8.2.2",
@@ -25,6 +26,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.11.6",
     "cross-env": "^5.1.3",
+    "css-loader": "^0.28.10",
     "enzyme": "^2.4.1",
     "eslint": "^4.18.2",
     "eslint-plugin-flowtype": "^2.46.1",
@@ -40,6 +42,7 @@
     "react-addons-test-utils": "^15.6.0",
     "react-dom": "^16.2.0",
     "rimraf": "^2.5.4",
+    "style-loader": "^0.20.2",
     "styled-components": "^3.2.0",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.10",
@@ -57,7 +60,7 @@
     "test:watch": "jest --watch",
     "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --mode development",
     "gh-pages:clean": "rimraf _gh-pages && ncp ./docs ./_gh-pages",
-    "gh-pages:build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.ghPage.js",
+    "gh-pages:build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.ghPage.js  --mode production",
     "gh-pages:publish": "git-directory-deploy --directory _gh-pages",
     "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish",
     "validate": "npm ls"

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -19,6 +19,17 @@ module.exports = {
         test: /\.js$/,
         use: 'babel',
         exclude: path.resolve(__dirname, "node_modules")
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          }
+        ]
       }
     ]
   }