react-i18next - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+### 1.5.0
+- adds wait option, which delays initial rendering until translations are loaded
+
 ### 1.4.2
@@ -2,0 +5,0 @@ - possible fix for HRM issues

dist/commonjs/translate.js

@@ -33,2 +33,4 @@ 'use strict';
   var withRef = _options$withRef === undefined ? false : _options$withRef;
+  var _options$wait = options.wait;
+  var wait = _options$wait === undefined ? false : _options$wait;
 
@@ -51,4 +53,7 @@
         _this.state = {
-          i18nLoadedAt: null
+          i18nLoadedAt: null,
+          ready: false
         };
+
+        _this.onI18nChanged = _this.onI18nChanged.bind(_this);
         return _this;
@@ -65,4 +70,8 @@ }
         value: function componentWillMount() {
+          var _this2 = this;
+
           this.mounted = true;
-          i18n.loadNamespaces(namespaces);
+          i18n.loadNamespaces(namespaces, function () {
+            _this2.setState({ ready: true });
+          });
           this.t = i18n.getFixedT(null, namespaces);
@@ -73,10 +82,2 @@ }
         value: function componentDidMount() {
-          var _this2 = this;
-
-          this.onI18nChanged = function () {
-            if (!_this2.mounted) return;
-
-            _this2.setState({ i18nLoadedAt: new Date() });
-          };
-
           i18n.on('languageChanged loaded', this.onI18nChanged);
@@ -94,4 +95,4 @@ }
       }, {
-        key: 'onI18nChange',
-        value: function onI18nChange() {
+        key: 'onI18nChanged',
+        value: function onI18nChanged() {
           if (!this.mounted) return;
@@ -114,3 +115,5 @@
         value: function render() {
-          var i18nLoadedAt = this.state.i18nLoadedAt;
+          var _state = this.state;
+          var i18nLoadedAt = _state.i18nLoadedAt;
+          var ready = _state.ready;
 
@@ -123,2 +126,4 @@ var extraProps = { i18nLoadedAt: i18nLoadedAt, t: this.t };
 
+          if (!ready && wait) return null;
+
           return _react2.default.createElement(WrappedComponent, _extends({}, this.props, extraProps));
@@ -125,0 +130,0 @@ }

dist/es/translate.js

@@ -21,2 +21,4 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
   var withRef = _options$withRef === undefined ? false : _options$withRef;
+  var _options$wait = options.wait;
+  var wait = _options$wait === undefined ? false : _options$wait;
 
@@ -39,4 +41,7 @@
         _this.state = {
-          i18nLoadedAt: null
+          i18nLoadedAt: null,
+          ready: false
         };
+
+        _this.onI18nChanged = _this.onI18nChanged.bind(_this);
         return _this;
@@ -53,4 +58,8 @@ }
         value: function componentWillMount() {
+          var _this2 = this;
+
           this.mounted = true;
-          i18n.loadNamespaces(namespaces);
+          i18n.loadNamespaces(namespaces, function () {
+            _this2.setState({ ready: true });
+          });
           this.t = i18n.getFixedT(null, namespaces);
@@ -61,10 +70,2 @@ }
         value: function componentDidMount() {
-          var _this2 = this;
-
-          this.onI18nChanged = function () {
-            if (!_this2.mounted) return;
-
-            _this2.setState({ i18nLoadedAt: new Date() });
-          };
-
           i18n.on('languageChanged loaded', this.onI18nChanged);
@@ -82,4 +83,4 @@ }
       }, {
-        key: 'onI18nChange',
-        value: function onI18nChange() {
+        key: 'onI18nChanged',
+        value: function onI18nChanged() {
           if (!this.mounted) return;
@@ -102,3 +103,5 @@
         value: function render() {
-          var i18nLoadedAt = this.state.i18nLoadedAt;
+          var _state = this.state;
+          var i18nLoadedAt = _state.i18nLoadedAt;
+          var ready = _state.ready;
 
@@ -111,2 +114,4 @@ var extraProps = { i18nLoadedAt: i18nLoadedAt, t: this.t };
 
+          if (!ready && wait) return null;
+
           return React.createElement(WrappedComponent, _extends({}, this.props, extraProps));
@@ -113,0 +118,0 @@ }

dist/umd/react-i18next.js

@@ -126,2 +126,4 @@ (function (global, factory) {
     var withRef = _options$withRef === undefined ? false : _options$withRef;
+    var _options$wait = options.wait;
+    var wait = _options$wait === undefined ? false : _options$wait;
 
@@ -144,4 +146,7 @@
           _this.state = {
-            i18nLoadedAt: null
+            i18nLoadedAt: null,
+            ready: false
           };
+
+          _this.onI18nChanged = _this.onI18nChanged.bind(_this);
           return _this;
@@ -158,4 +163,8 @@ }
           value: function componentWillMount() {
+            var _this2 = this;
+
             this.mounted = true;
-            i18n.loadNamespaces(namespaces);
+            i18n.loadNamespaces(namespaces, function () {
+              _this2.setState({ ready: true });
+            });
             this.t = i18n.getFixedT(null, namespaces);
@@ -166,10 +175,2 @@ }
           value: function componentDidMount() {
-            var _this2 = this;
-
-            this.onI18nChanged = function () {
-              if (!_this2.mounted) return;
-
-              _this2.setState({ i18nLoadedAt: new Date() });
-            };
-
             i18n.on('languageChanged loaded', this.onI18nChanged);
@@ -187,4 +188,4 @@ }
         }, {
-          key: 'onI18nChange',
-          value: function onI18nChange() {
+          key: 'onI18nChanged',
+          value: function onI18nChanged() {
             if (!this.mounted) return;
@@ -207,3 +208,5 @@
           value: function render() {
-            var i18nLoadedAt = this.state.i18nLoadedAt;
+            var _state = this.state;
+            var i18nLoadedAt = _state.i18nLoadedAt;
+            var ready = _state.ready;
 
@@ -216,2 +219,4 @@ var extraProps = { i18nLoadedAt: i18nLoadedAt, t: this.t };
 
+            if (!ready && wait) return null;
+
             return React__default.createElement(WrappedComponent, babelHelpers.extends({}, this.props, extraProps));
@@ -218,0 +223,0 @@ }

dist/umd/react-i18next.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define("reactI18next",["exports","react"],t):t(e.reactI18next=e.reactI18next||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.displayName||e.name||"Component"}function r(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=r.withRef,i=void 0===o?!1:o;return function(r){var o=void 0,a=function(t){function n(t,r){c.classCallCheck(this,n);var i=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,t,r));return o=r.i18n,e=e||o.options.defaultNS,i.state={i18nLoadedAt:null},i}return c.inherits(n,t),c.createClass(n,[{key:"getChildContext",value:function(){return{t:this.t}}},{key:"componentWillMount",value:function(){this.mounted=!0,o.loadNamespaces(e),this.t=o.getFixedT(null,e)}},{key:"componentDidMount",value:function(){var e=this;this.onI18nChanged=function(){e.mounted&&e.setState({i18nLoadedAt:new Date})},o.on("languageChanged loaded",this.onI18nChanged)}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.onI18nChanged&&(o.off("languageChanged",this.onI18nChanged),o.off("loaded",this.onI18nChanged))}},{key:"onI18nChange",value:function(){this.mounted&&this.setState({i18nLoadedAt:new Date})}},{key:"getWrappedInstance",value:function(){return i||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.refs.wrappedInstance}},{key:"render",value:function(){var e=this.state.i18nLoadedAt,t={i18nLoadedAt:e,t:this.t};return i&&(t.ref="wrappedInstance"),s.createElement(r,c["extends"]({},this.props,t))}}]),n}(t.Component);return a.WrappedComponent=r,a.contextTypes={i18n:t.PropTypes.object.isRequired},a.childContextTypes={t:t.PropTypes.func.isRequired},a.displayName="Translate["+n(r)+"]",a.namespaces=e,a}}function o(e,t){for(var n=0,r=e.length;r>n;n++)if("object"===c["typeof"](e[n])){var o=!0,i=!1,a=void 0;try{for(var s,u=Object.entries(e[n])[Symbol.iterator]();!(o=(s=u.next()).done);o=!0){var l=c.slicedToArray(s.value,2),p=l[0],f=l[1];t(f,n,p)}}catch(h){i=!0,a=h}finally{try{!o&&u["return"]&&u["return"]()}finally{if(i)throw a}}}else t(e[n],n)}function i(e){var t=[];return o(e,function(e){e&&e.namespaces&&e.namespaces.forEach(function(e){-1===t.indexOf(e)&&t.push(e)})}),t}function a(e){var t=e.components,n=e.i18n,r=i(t);return new Promise(function(e){n.loadNamespaces(r,e)})}var s="default"in t?t["default"]:t,c={};c["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c.createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},c.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c.slicedToArray=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(c){o=!0,i=c}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();var u=function(e){function t(e,n){c.classCallCheck(this,t);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,n));return r.i18n=n.i18n,r.t=n.t,r}return c.inherits(t,e),c.createClass(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,r=c["extends"]({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),o=this.t(this.props.i18nKey,r);if(!o||"string"!=typeof o)return s.createElement("noscript",null);var i=[];return o.split(n).reduce(function(t,n,r){var o;if(r%2===0){if(0===n.length)return t;o=n}else o=e.props[n];return t.push(o),t},i),s.createElement.apply(this,[t,this.props].concat(i))}}]),t}(t.Component);u.contextTypes={i18n:t.PropTypes.object.isRequired,t:t.PropTypes.func.isRequired};var l=function(e){function n(e,t){c.classCallCheck(this,n);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,e,t));return r.i18n=e.i18n,r}return c.inherits(n,e),c.createClass(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){this.props.i18n!==e.i18n&&console.error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);l.propTypes={i18n:t.PropTypes.object.isRequired,children:t.PropTypes.element.isRequired},l.childContextTypes={i18n:t.PropTypes.object.isRequired},e.loadNamespaces=a,e.translate=r,e.Interpolate=u,e.I18nextProvider=l});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define("reactI18next",["exports","react"],t):t(e.reactI18next=e.reactI18next||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.displayName||e.name||"Component"}function r(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=r.withRef,i=void 0===o?!1:o,a=r.wait,u=void 0===a?!1:a;return function(r){var o=void 0,a=function(t){function n(t,r){c.classCallCheck(this,n);var i=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,t,r));return o=r.i18n,e=e||o.options.defaultNS,i.state={i18nLoadedAt:null,ready:!1},i.onI18nChanged=i.onI18nChanged.bind(i),i}return c.inherits(n,t),c.createClass(n,[{key:"getChildContext",value:function(){return{t:this.t}}},{key:"componentWillMount",value:function(){var t=this;this.mounted=!0,o.loadNamespaces(e,function(){t.setState({ready:!0})}),this.t=o.getFixedT(null,e)}},{key:"componentDidMount",value:function(){o.on("languageChanged loaded",this.onI18nChanged)}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.onI18nChanged&&(o.off("languageChanged",this.onI18nChanged),o.off("loaded",this.onI18nChanged))}},{key:"onI18nChanged",value:function(){this.mounted&&this.setState({i18nLoadedAt:new Date})}},{key:"getWrappedInstance",value:function(){return i||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.refs.wrappedInstance}},{key:"render",value:function(){var e=this.state,t=e.i18nLoadedAt,n=e.ready,o={i18nLoadedAt:t,t:this.t};return i&&(o.ref="wrappedInstance"),!n&&u?null:s.createElement(r,c["extends"]({},this.props,o))}}]),n}(t.Component);return a.WrappedComponent=r,a.contextTypes={i18n:t.PropTypes.object.isRequired},a.childContextTypes={t:t.PropTypes.func.isRequired},a.displayName="Translate["+n(r)+"]",a.namespaces=e,a}}function o(e,t){for(var n=0,r=e.length;r>n;n++)if("object"===c["typeof"](e[n])){var o=!0,i=!1,a=void 0;try{for(var s,u=Object.entries(e[n])[Symbol.iterator]();!(o=(s=u.next()).done);o=!0){var l=c.slicedToArray(s.value,2),p=l[0],f=l[1];t(f,n,p)}}catch(d){i=!0,a=d}finally{try{!o&&u["return"]&&u["return"]()}finally{if(i)throw a}}}else t(e[n],n)}function i(e){var t=[];return o(e,function(e){e&&e.namespaces&&e.namespaces.forEach(function(e){-1===t.indexOf(e)&&t.push(e)})}),t}function a(e){var t=e.components,n=e.i18n,r=i(t);return new Promise(function(e){n.loadNamespaces(r,e)})}var s="default"in t?t["default"]:t,c={};c["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c.createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},c.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c.slicedToArray=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(c){o=!0,i=c}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();var u=function(e){function t(e,n){c.classCallCheck(this,t);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,n));return r.i18n=n.i18n,r.t=n.t,r}return c.inherits(t,e),c.createClass(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,r=c["extends"]({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),o=this.t(this.props.i18nKey,r);if(!o||"string"!=typeof o)return s.createElement("noscript",null);var i=[];return o.split(n).reduce(function(t,n,r){var o;if(r%2===0){if(0===n.length)return t;o=n}else o=e.props[n];return t.push(o),t},i),s.createElement.apply(this,[t,this.props].concat(i))}}]),t}(t.Component);u.contextTypes={i18n:t.PropTypes.object.isRequired,t:t.PropTypes.func.isRequired};var l=function(e){function n(e,t){c.classCallCheck(this,n);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,e,t));return r.i18n=e.i18n,r}return c.inherits(n,e),c.createClass(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){this.props.i18n!==e.i18n&&console.error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);l.propTypes={i18n:t.PropTypes.object.isRequired,children:t.PropTypes.element.isRequired},l.childContextTypes={i18n:t.PropTypes.object.isRequired},e.loadNamespaces=a,e.translate=r,e.Interpolate=u,e.I18nextProvider=l});

package.json

 {
   "name": "react-i18next",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "React integration for i18next",
@@ -5,0 +5,0 @@ "main": "dist/commonjs/index.js",

react-i18next.js

@@ -126,2 +126,4 @@ (function (global, factory) {
     var withRef = _options$withRef === undefined ? false : _options$withRef;
+    var _options$wait = options.wait;
+    var wait = _options$wait === undefined ? false : _options$wait;
 
@@ -144,4 +146,7 @@
           _this.state = {
-            i18nLoadedAt: null
+            i18nLoadedAt: null,
+            ready: false
           };
+
+          _this.onI18nChanged = _this.onI18nChanged.bind(_this);
           return _this;
@@ -158,4 +163,8 @@ }
           value: function componentWillMount() {
+            var _this2 = this;
+
             this.mounted = true;
-            i18n.loadNamespaces(namespaces);
+            i18n.loadNamespaces(namespaces, function () {
+              _this2.setState({ ready: true });
+            });
             this.t = i18n.getFixedT(null, namespaces);
@@ -166,10 +175,2 @@ }
           value: function componentDidMount() {
-            var _this2 = this;
-
-            this.onI18nChanged = function () {
-              if (!_this2.mounted) return;
-
-              _this2.setState({ i18nLoadedAt: new Date() });
-            };
-
             i18n.on('languageChanged loaded', this.onI18nChanged);
@@ -187,4 +188,4 @@ }
         }, {
-          key: 'onI18nChange',
-          value: function onI18nChange() {
+          key: 'onI18nChanged',
+          value: function onI18nChanged() {
             if (!this.mounted) return;
@@ -207,3 +208,5 @@
           value: function render() {
-            var i18nLoadedAt = this.state.i18nLoadedAt;
+            var _state = this.state;
+            var i18nLoadedAt = _state.i18nLoadedAt;
+            var ready = _state.ready;
 
@@ -216,2 +219,4 @@ var extraProps = { i18nLoadedAt: i18nLoadedAt, t: this.t };
 
+            if (!ready && wait) return null;
+
             return React__default.createElement(WrappedComponent, babelHelpers.extends({}, this.props, extraProps));
@@ -218,0 +223,0 @@ }

react-i18next.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define("reactI18next",["exports","react"],t):t(e.reactI18next=e.reactI18next||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.displayName||e.name||"Component"}function r(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=r.withRef,i=void 0===o?!1:o;return function(r){var o=void 0,a=function(t){function n(t,r){c.classCallCheck(this,n);var i=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,t,r));return o=r.i18n,e=e||o.options.defaultNS,i.state={i18nLoadedAt:null},i}return c.inherits(n,t),c.createClass(n,[{key:"getChildContext",value:function(){return{t:this.t}}},{key:"componentWillMount",value:function(){this.mounted=!0,o.loadNamespaces(e),this.t=o.getFixedT(null,e)}},{key:"componentDidMount",value:function(){var e=this;this.onI18nChanged=function(){e.mounted&&e.setState({i18nLoadedAt:new Date})},o.on("languageChanged loaded",this.onI18nChanged)}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.onI18nChanged&&(o.off("languageChanged",this.onI18nChanged),o.off("loaded",this.onI18nChanged))}},{key:"onI18nChange",value:function(){this.mounted&&this.setState({i18nLoadedAt:new Date})}},{key:"getWrappedInstance",value:function(){return i||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.refs.wrappedInstance}},{key:"render",value:function(){var e=this.state.i18nLoadedAt,t={i18nLoadedAt:e,t:this.t};return i&&(t.ref="wrappedInstance"),s.createElement(r,c["extends"]({},this.props,t))}}]),n}(t.Component);return a.WrappedComponent=r,a.contextTypes={i18n:t.PropTypes.object.isRequired},a.childContextTypes={t:t.PropTypes.func.isRequired},a.displayName="Translate["+n(r)+"]",a.namespaces=e,a}}function o(e,t){for(var n=0,r=e.length;r>n;n++)if("object"===c["typeof"](e[n])){var o=!0,i=!1,a=void 0;try{for(var s,u=Object.entries(e[n])[Symbol.iterator]();!(o=(s=u.next()).done);o=!0){var l=c.slicedToArray(s.value,2),p=l[0],f=l[1];t(f,n,p)}}catch(h){i=!0,a=h}finally{try{!o&&u["return"]&&u["return"]()}finally{if(i)throw a}}}else t(e[n],n)}function i(e){var t=[];return o(e,function(e){e&&e.namespaces&&e.namespaces.forEach(function(e){-1===t.indexOf(e)&&t.push(e)})}),t}function a(e){var t=e.components,n=e.i18n,r=i(t);return new Promise(function(e){n.loadNamespaces(r,e)})}var s="default"in t?t["default"]:t,c={};c["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c.createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},c.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c.slicedToArray=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(c){o=!0,i=c}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();var u=function(e){function t(e,n){c.classCallCheck(this,t);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,n));return r.i18n=n.i18n,r.t=n.t,r}return c.inherits(t,e),c.createClass(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,r=c["extends"]({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),o=this.t(this.props.i18nKey,r);if(!o||"string"!=typeof o)return s.createElement("noscript",null);var i=[];return o.split(n).reduce(function(t,n,r){var o;if(r%2===0){if(0===n.length)return t;o=n}else o=e.props[n];return t.push(o),t},i),s.createElement.apply(this,[t,this.props].concat(i))}}]),t}(t.Component);u.contextTypes={i18n:t.PropTypes.object.isRequired,t:t.PropTypes.func.isRequired};var l=function(e){function n(e,t){c.classCallCheck(this,n);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,e,t));return r.i18n=e.i18n,r}return c.inherits(n,e),c.createClass(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){this.props.i18n!==e.i18n&&console.error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);l.propTypes={i18n:t.PropTypes.object.isRequired,children:t.PropTypes.element.isRequired},l.childContextTypes={i18n:t.PropTypes.object.isRequired},e.loadNamespaces=a,e.translate=r,e.Interpolate=u,e.I18nextProvider=l});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define("reactI18next",["exports","react"],t):t(e.reactI18next=e.reactI18next||{},e.React)}(this,function(e,t){"use strict";function n(e){return e.displayName||e.name||"Component"}function r(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=r.withRef,i=void 0===o?!1:o,a=r.wait,u=void 0===a?!1:a;return function(r){var o=void 0,a=function(t){function n(t,r){c.classCallCheck(this,n);var i=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,t,r));return o=r.i18n,e=e||o.options.defaultNS,i.state={i18nLoadedAt:null,ready:!1},i.onI18nChanged=i.onI18nChanged.bind(i),i}return c.inherits(n,t),c.createClass(n,[{key:"getChildContext",value:function(){return{t:this.t}}},{key:"componentWillMount",value:function(){var t=this;this.mounted=!0,o.loadNamespaces(e,function(){t.setState({ready:!0})}),this.t=o.getFixedT(null,e)}},{key:"componentDidMount",value:function(){o.on("languageChanged loaded",this.onI18nChanged)}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.onI18nChanged&&(o.off("languageChanged",this.onI18nChanged),o.off("loaded",this.onI18nChanged))}},{key:"onI18nChanged",value:function(){this.mounted&&this.setState({i18nLoadedAt:new Date})}},{key:"getWrappedInstance",value:function(){return i||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.refs.wrappedInstance}},{key:"render",value:function(){var e=this.state,t=e.i18nLoadedAt,n=e.ready,o={i18nLoadedAt:t,t:this.t};return i&&(o.ref="wrappedInstance"),!n&&u?null:s.createElement(r,c["extends"]({},this.props,o))}}]),n}(t.Component);return a.WrappedComponent=r,a.contextTypes={i18n:t.PropTypes.object.isRequired},a.childContextTypes={t:t.PropTypes.func.isRequired},a.displayName="Translate["+n(r)+"]",a.namespaces=e,a}}function o(e,t){for(var n=0,r=e.length;r>n;n++)if("object"===c["typeof"](e[n])){var o=!0,i=!1,a=void 0;try{for(var s,u=Object.entries(e[n])[Symbol.iterator]();!(o=(s=u.next()).done);o=!0){var l=c.slicedToArray(s.value,2),p=l[0],f=l[1];t(f,n,p)}}catch(d){i=!0,a=d}finally{try{!o&&u["return"]&&u["return"]()}finally{if(i)throw a}}}else t(e[n],n)}function i(e){var t=[];return o(e,function(e){e&&e.namespaces&&e.namespaces.forEach(function(e){-1===t.indexOf(e)&&t.push(e)})}),t}function a(e){var t=e.components,n=e.i18n,r=i(t);return new Promise(function(e){n.loadNamespaces(r,e)})}var s="default"in t?t["default"]:t,c={};c["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},c.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c.createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},c.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c.slicedToArray=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(c){o=!0,i=c}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();var u=function(e){function t(e,n){c.classCallCheck(this,t);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,n));return r.i18n=n.i18n,r.t=n.t,r}return c.inherits(t,e),c.createClass(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,r=c["extends"]({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),o=this.t(this.props.i18nKey,r);if(!o||"string"!=typeof o)return s.createElement("noscript",null);var i=[];return o.split(n).reduce(function(t,n,r){var o;if(r%2===0){if(0===n.length)return t;o=n}else o=e.props[n];return t.push(o),t},i),s.createElement.apply(this,[t,this.props].concat(i))}}]),t}(t.Component);u.contextTypes={i18n:t.PropTypes.object.isRequired,t:t.PropTypes.func.isRequired};var l=function(e){function n(e,t){c.classCallCheck(this,n);var r=c.possibleConstructorReturn(this,Object.getPrototypeOf(n).call(this,e,t));return r.i18n=e.i18n,r}return c.inherits(n,e),c.createClass(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){this.props.i18n!==e.i18n&&console.error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);l.propTypes={i18n:t.PropTypes.object.isRequired,children:t.PropTypes.element.isRequired},l.childContextTypes={i18n:t.PropTypes.object.isRequired},e.loadNamespaces=a,e.translate=r,e.Interpolate=u,e.I18nextProvider=l});

README.md

@@ -76,3 +76,26 @@ # react-i18next
 
-__getWrappedInstance()__: allows you to access to the component instance, wrapped into `translate()`. 
+You can set options.wait to true if you want to delay rendering until translation files are loaded:
+
+```javascript
+import React from 'react';
+import { translate } from 'react-i18next';
+
+function TranslatableView(props) {
+  const { t } = props;
+
+  return (
+    <div>
+      <h1>{t('keyFromDefault')}</h1>
+      <p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
+    </div>
+  )
+}
+
+export default translate(['defaultNamespace', 'anotherNamespace'], { wait: true })(TranslatableView);
+
+```
+
+
+
+__getWrappedInstance()__: allows you to access to the component instance, wrapped into `translate()`.
 Only available if you pass `{ withRef: true }` to the `translate()` options.
@@ -85,10 +108,10 @@
 class TranslatableView extends Component {
-  
+
   foo() {
     // do something important
   }
-  
+
   render() {
     const { t } = this.props;
-    
+
     return (
@@ -203,3 +226,3 @@ <div>
    );
-   
+
    // render as desired now ...
@@ -206,0 +229,0 @@ });

src/translate.js

@@ -8,3 +8,3 @@ import React, { Component, PropTypes } from 'react';
 export default function translate(namespaces, options = {}) {
-  const { withRef = false } = options;
+  const { withRef = false, wait = false } = options;
 
@@ -15,71 +15,72 @@ return function Wrapper(WrappedComponent) {
     class Translate extends Component {
-        constructor(props, context) {
-          super(props, context);
-          i18n = context.i18n;
-          namespaces = namespaces || i18n.options.defaultNS;
+      constructor(props, context) {
+        super(props, context);
+        i18n = context.i18n;
+        namespaces = namespaces || i18n.options.defaultNS;
 
-          this.state = {
-            i18nLoadedAt: null
-          };
-        }
+        this.state = {
+          i18nLoadedAt: null,
+          ready: false
+        };
 
-        getChildContext() {
-          return { t: this.t };
-        }
+        this.onI18nChanged = this.onI18nChanged.bind(this);
+      }
 
-        componentWillMount() {
-          this.mounted = true;
-          i18n.loadNamespaces(namespaces);
-          this.t = i18n.getFixedT(null, namespaces);
-        }
+      getChildContext() {
+        return { t: this.t };
+      }
 
-        componentDidMount() {
-          this.onI18nChanged = () => {
-            if (!this.mounted) return;
+      componentWillMount() {
+        this.mounted = true;
+        i18n.loadNamespaces(namespaces, () => {
+          this.setState({ ready: true });
+        });
+        this.t = i18n.getFixedT(null, namespaces);
+      }
 
-            this.setState({ i18nLoadedAt: new Date() });
-          };
+      componentDidMount() {
+        i18n.on('languageChanged loaded', this.onI18nChanged);
+      }
 
-          i18n.on('languageChanged loaded', this.onI18nChanged);
+      componentWillUnmount() {
+        this.mounted = false;
+        if (this.onI18nChanged) {
+          i18n.off('languageChanged', this.onI18nChanged);
+          i18n.off('loaded', this.onI18nChanged);
         }
+      }
 
-        componentWillUnmount() {
-          this.mounted = false;
-          if (this.onI18nChanged) {
-            i18n.off('languageChanged', this.onI18nChanged);
-            i18n.off('loaded', this.onI18nChanged);
-          }
-        }
+      onI18nChanged() {
+        if (!this.mounted) return;
 
-        onI18nChange() {
-          if (!this.mounted) return;
+        this.setState({ i18nLoadedAt: new Date() });
+      }
 
-          this.setState({ i18nLoadedAt: new Date() });
+      getWrappedInstance() {
+        if (!withRef) {
+          // eslint-disable-next-line no-console
+          console.error(
+            'To access the wrapped instance, you need to specify ' +
+            '{ withRef: true } as the second argument of the translate() call.'
+          );
         }
 
-        getWrappedInstance() {
-          if (!withRef) {
-            // eslint-disable-next-line no-console
-            console.error(
-              'To access the wrapped instance, you need to specify ' +
-              '{ withRef: true } as the second argument of the translate() call.'
-            );
-          }
+        return this.refs.wrappedInstance;
+      }
 
-          return this.refs.wrappedInstance;
+      render() {
+        const { i18nLoadedAt, ready } = this.state;
+        const extraProps = { i18nLoadedAt, t: this.t };
+
+        if (withRef) {
+          extraProps.ref = 'wrappedInstance';
         }
 
-        render() {
-          const { i18nLoadedAt } = this.state;
-          const extraProps = { i18nLoadedAt, t: this.t };
+        if (!ready && wait) return null;
 
-          if (withRef) {
-            extraProps.ref = 'wrappedInstance';
-          }
-
-          return React.createElement(
-            WrappedComponent,
-            { ...this.props, ...extraProps }
-          );
-        }
+        return React.createElement(
+          WrappedComponent,
+          { ...this.props, ...extraProps }
+        );
+      }
     }
@@ -86,0 +87,0 @@

No alert changes

Improved metrics

Total package byte prevSize

83206

increased by1.92%

Lines of code

1414

increased by1.51%

Number of lines in readme file

230

increased by11.11%

No dependency changes