Merge pull request #5 from ekonstantinidis/icon-class

Allow className & font awesome icons
manosim · May 7, 2015 · 7a4e569 · 7a4e569
2 parents ec27f09 + 9784cfe
commit 7a4e569
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,12 @@
 ##### Loading Text
     <Loading shouldShow={this.state.loading} text='Checking your details...' />
 
+##### CSS Class
+    <Loading shouldShow={this.state.loading} className='loading-wrapper' />
+
+##### Font Awesome Icon
+    <Loading shouldShow={this.state.loading} faIcon='fa fa-refresh fa-spin' />
+
 
 ### Development
 Install `http-server` from npm, run it and go to http://127.0.0.1:8080/

diff --git a/index.js b/index.js
@@ -7,14 +7,21 @@ module.exports = React.createClass({
   displayName: 'Reloading',
 
   render: function () {
-    var text = this.props.text ? this.props.text : 'Loading...';
+    var classname = this.props.className ? this.props.className : '';
+    var content = this.props.text ? this.props.text : 'Loading';
+
+    if (this.props.faIcon) {
+      content = React.createElement("i", {className: this.props.faIcon}, '');
+    }
+
     if (!this.props.shouldShow) {
       loadingStyle.display = 'none';
     } else {
       loadingStyle.display = 'block';
     }
+
     return (
-      React.createElement("div", {style: loadingStyle}, text)
+      React.createElement("div", {className: classname, style: loadingStyle}, content)
     );
 
   }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reloading",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A Loading component for ReactJS.",
   "main": "index.js",
   "scripts": {