Added options to change the tick interval + added hours, seconds etc as a div that can hidden or shown

.babelrc

@@ -1 +1 @@
-{ "presets": ["es2015", "react", "stage-0"] }
+{ "presets": ["es2015", "react", "stage-2"] }

example/public/bundle.js

@@ -149,7 +149,7 @@
 	    key: 'componentDidMount',
 	    value: function componentDidMount() {
 	      this.tick();
-	      this.interval = setInterval(this.tick.bind(this), 1000);
+	      this.interval = setInterval(this.tick.bind(this), this.props.tickInterval);
 	    }
 	  }, {
 	    key: 'componentWillUnmount',
@@ -175,7 +175,8 @@
 	  }, {
 	    key: 'render',
 	    value: function render() {
-	      return _react2.default.createElement('div', { className: 'react-count-down' }, _react2.default.createElement('span', { className: 'date' }, ' ', this.state.remaining), _react2.default.createElement('span', { className: 'prefix' }, ' ', this.props.options.prefix));
+	      var html = { __html: this.state.remaining };
+	      return _react2.default.createElement('div', { className: 'react-count-down' }, _react2.default.createElement('span', { className: 'date', dangerouslySetInnerHTML: html }), _react2.default.createElement('span', { className: 'prefix' }, ' ', this.props.options.prefix));
 	    }
 	  }]);
 
@@ -184,6 +185,14 @@
 
 	exports.default = Countdown;
 
+	Countdown.defaultProps = {
+	  tickInterval: 60000
+	};
+
+	Countdown.propTypes = {
+	  tickInterval: _react.PropTypes.number /* millisecond */
+	};
+
 /***/ },
 /* 2 */
 /***/ function(module, exports) {
@@ -208,10 +217,10 @@
 
 	  var between = [];
 
-	  days > 0 ? between.push(days + ' day' + (days > 1 ? 's' : '')) : false;
-	  hours > 0 ? between.push(hours + ' hour' + (hours > 1 ? 's' : '')) : false;
-	  minutes > 0 ? between.push(minutes + ' minute' + (minutes > 1 ? 's' : '')) : false;
-	  seconds > 0 ? between.push(seconds + ' second' + (seconds > 1 ? 's' : '')) : false;
+	  days > 0 ? between.push('<div id="countdown-days">' + days + ' day' + (days > 1 ? 's' : '') + '</div>') : false;
+	  hours > 0 ? between.push('<div id="countdown-hours">' + hours + ' hour' + (hours > 1 ? 's' : '') + '</div>') : false;
+	  minutes > 0 ? between.push('<div id="countdown-minutes">' + minutes + ' minute' + (minutes > 1 ? 's' : '') + '</div>') : false;
+	  seconds > 0 ? between.push('<div id="countdown-seconds">' + seconds + ' second' + (seconds > 1 ? 's' : '') + '</div>') : false;
 
 	  return between.join(' ');
 	};
@@ -18453,10 +18462,10 @@
 	 */
 
 	function getUnboundedScrollPosition(scrollable) {
-	  if (scrollable === window) {
+	  if (scrollable.Window && scrollable instanceof scrollable.Window) {
 	    return {
-	      x: window.pageXOffset || document.documentElement.scrollLeft,
-	      y: window.pageYOffset || document.documentElement.scrollTop
+	      x: scrollable.pageXOffset || scrollable.document.documentElement.scrollLeft,
+	      y: scrollable.pageYOffset || scrollable.document.documentElement.scrollTop
 	    };
 	  }
 	  return {
@@ -19205,7 +19214,9 @@
 	 * @return {boolean} Whether or not the object is a DOM node.
 	 */
 	function isNode(object) {
-	  return !!(object && (typeof Node === 'function' ? object instanceof Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string'));
+	  var doc = object ? object.ownerDocument || object : document;
+	  var defaultView = doc.defaultView || window;
+	  return !!(object && (typeof defaultView.Node === 'function' ? object instanceof defaultView.Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string'));
 	}
 
 	module.exports = isNode;
@@ -19235,15 +19246,19 @@
 	 *
 	 * The activeElement will be null only if the document or document body is not
 	 * yet defined.
+	 *
+	 * @param {?DOMDocument} doc Defaults to current document.
+	 * @return {?DOMElement}
 	 */
-	function getActiveElement() /*?DOMElement*/{
-	  if (typeof document === 'undefined') {
+	function getActiveElement(doc) /*?DOMElement*/{
+	  doc = doc || (typeof document !== 'undefined' ? document : undefined);
+	  if (typeof doc === 'undefined') {
 	    return null;
 	  }
 	  try {
-	    return document.activeElement || document.body;
+	    return doc.activeElement || doc.body;
 	  } catch (e) {
-	    return document.body;
+	    return doc.body;
 	  }
 	}
 

lib/Countdown.js

@@ -42,7 +42,7 @@ var Countdown = function (_Component) {
     key: 'componentDidMount',
     value: function componentDidMount() {
       this.tick();
-      this.interval = setInterval(this.tick.bind(this), 1000);
+      this.interval = setInterval(this.tick.bind(this), this.props.tickInterval);
     }
   }, {
     key: 'componentWillUnmount',
@@ -68,15 +68,11 @@ var Countdown = function (_Component) {
   }, {
     key: 'render',
     value: function render() {
+      var html = { __html: this.state.remaining };
       return _react2.default.createElement(
         'div',
         { className: 'react-count-down' },
-        _react2.default.createElement(
-          'span',
-          { className: 'date' },
-          ' ',
-          this.state.remaining
-        ),
+        _react2.default.createElement('span', { className: 'date', dangerouslySetInnerHTML: html }),
         _react2.default.createElement(
           'span',
           { className: 'prefix' },
@@ -90,4 +86,13 @@ var Countdown = function (_Component) {
   return Countdown;
 }(_react.Component);
 
-exports.default = Countdown;
+exports.default = Countdown;
+
+
+Countdown.defaultProps = {
+  tickInterval: 60000
+};
+
+Countdown.propTypes = {
+  tickInterval: _react.PropTypes.number /* millisecond */
+};

lib/DateBetween.js

@@ -18,10 +18,10 @@ var DateBetween = function DateBetween(startDate, endDate) {
 
   var between = [];
 
-  days > 0 ? between.push(days + ' day' + (days > 1 ? 's' : '')) : false;
-  hours > 0 ? between.push(hours + ' hour' + (hours > 1 ? 's' : '')) : false;
-  minutes > 0 ? between.push(minutes + ' minute' + (minutes > 1 ? 's' : '')) : false;
-  seconds > 0 ? between.push(seconds + ' second' + (seconds > 1 ? 's' : '')) : false;
+  days > 0 ? between.push('<div id="countdown-days">' + days + ' day' + (days > 1 ? 's' : '') + '</div>') : false;
+  hours > 0 ? between.push('<div id="countdown-hours">' + hours + ' hour' + (hours > 1 ? 's' : '') + '</div>') : false;
+  minutes > 0 ? between.push('<div id="countdown-minutes">' + minutes + ' minute' + (minutes > 1 ? 's' : '') + '</div>') : false;
+  seconds > 0 ? between.push('<div id="countdown-seconds">' + seconds + ' second' + (seconds > 1 ? 's' : '') + '</div>') : false;
 
   return between.join(' ');
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-count-down",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "a simple count down clock component",
   "main": "lib/Countdown.js",
   "repository": {
@@ -34,7 +34,7 @@
     "build": "babel src --out-dir lib",
     "example": "webpack --config ./example/webpack.config.js",
     "serve": "node ./example/server.js",
-    "start": "npm run example && npm run serve",
+    "start": "npm run build && npm run example && npm run serve",
     "test": "tape test/index.js"
   },
   "keywords": [

src/Countdown.js

@@ -14,7 +14,7 @@ export default class Countdown extends Component {
 
   componentDidMount() {
     this.tick()
-    this.interval = setInterval(this.tick.bind(this), 1000)
+    this.interval = setInterval(this.tick.bind(this), this.props.tickInterval)
   }
 
   componentWillUnmount() {
@@ -37,11 +37,20 @@ export default class Countdown extends Component {
   }
 
   render() {
+    const html = { __html: this.state.remaining };
     return (
       <div className="react-count-down">
-       <span className="date"> {this.state.remaining}</span>
+       <span className="date" dangerouslySetInnerHTML={html}/>
        <span className="prefix"> {this.props.options.prefix}</span>
       </div>
     )
   };
 }
+
+Countdown.defaultProps = {
+  tickInterval: 60000
+}
+
+Countdown.propTypes = {
+  tickInterval: PropTypes.number /* millisecond */
+};

src/DateBetween.js

@@ -17,10 +17,10 @@ let DateBetween = function(startDate, endDate) {
 
   let between = [];
 
-  days > 0 ? between.push(`${days} day${days > 1 ? 's' : ''}`) : false;
-  hours > 0 ? between.push(`${hours} hour${hours > 1 ? 's' : ''}`) : false;
-  minutes > 0 ? between.push(`${minutes} minute${minutes > 1 ? 's' : ''}`) : false;
-  seconds > 0 ? between.push(`${seconds} second${seconds > 1 ? 's' : ''}`) : false;
+  days > 0 ? between.push(`<div id="countdown-days">${days} day${days > 1 ? 's' : ''}</div>`) : false;
+  hours > 0 ? between.push(`<div id="countdown-hours">${hours} hour${hours > 1 ? 's' : ''}</div>`) : false;
+  minutes > 0 ? between.push(`<div id="countdown-minutes">${minutes} minute${minutes > 1 ? 's' : ''}</div>`) : false;
+  seconds > 0 ? between.push(`<div id="countdown-seconds">${seconds} second${seconds > 1 ? 's' : ''}</div>`) : false;
 
   return between.join(' ');
 }