Merge pull request #6 from ekonstantinidis/props-children

User ternary operators - Accept props children

README.md

@@ -47,6 +47,9 @@
 
 ### Properties
 
+##### Custom Content
+    <Loading shouldShow={this.state.loading}>Your content - images, text, whatever!</Loading>
+
 ##### Loading Text
     <Loading shouldShow={this.state.loading} text='Checking your details...' />
 

example/build/app.js

@@ -1,21 +1,21 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var React = require('react');
 
-var loadingStyle = {};
-
 module.exports = React.createClass({
 
   displayName: 'Reloading',
 
   render: function () {
-    var text = this.props.text ? this.props.text : 'Loading...';
-    if (!this.props.shouldShow) {
-      loadingStyle.display = 'none';
-    } else {
-      loadingStyle.display = 'block';
-    }
+    var content = this.props.text ? this.props.text : 'Loading...';
+    content = this.props.faIcon ? React.createElement("i", {className: this.props.faIcon}, '') : content;
+
     return (
-      React.createElement("div", {style: loadingStyle}, text)
+      React.createElement("div", {
+        className: this.props.className,
+        style: {
+          display: this.props.shouldShow ? 'block' : 'none'
+        }
+      }, this.props.children ? this.props.children : content)
     );
 
   }

index.js

@@ -1,27 +1,20 @@
 var React = require('react');
 
-var loadingStyle = {};
-
 module.exports = React.createClass({
 
   displayName: 'Reloading',
 
   render: function () {
-    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';
-    }
+    var content = this.props.text ? this.props.text : 'Loading...';
+    content = this.props.faIcon ? React.createElement("i", {className: this.props.faIcon}, '') : content;
 
     return (
-      React.createElement("div", {className: classname, style: loadingStyle}, content)
+      React.createElement("div", {
+        className: this.props.className,
+        style: {
+          display: this.props.shouldShow ? 'block' : 'none'
+        }
+      }, this.props.children ? this.props.children : content)
     );
 
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reloading",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A Loading component for ReactJS.",
   "main": "index.js",
   "scripts": {