react-localize - npm Package Compare versions

Comparing version 4.0.0-beta.1 to 4.0.0-beta.2

CHANGELOG.md

@@ -10,2 +10,9 @@ # Change Log
 
+## 2018-06-19 4.0.0-beta.2
+### Added
+- More documentation (migration guide, `<Text/>` replacement guide)
+- Made a few fixes to the `_localize` internal function flow, although
+the order of operations here may need to change again if there's feedback
+around the current way we invoke / don't invoke `props.localize`.
+
 ## 4.0.0-beta.1
@@ -21,3 +28,7 @@ ### Added
 
+### Removed
+- the `<Text/>` component is no longer in the API at all, and we will plan to add documentation
+on how you can build a simple one yourself using `withLocalization()`.
 
+
 ## 3.0.0, 3.0.0-beta 2017-04-26
@@ -24,0 +35,0 @@ ### Added

dist/react-localize.js

@@ -489,3 +489,19 @@ (function (global, factory) {
 
+      var isLocalizeProvided = localize !== LocalizationProvider.defaultProps.localize;
 
+      var localizeFn = localize;
+      if (typeof localize !== 'function') {
+        localizeFn = function localizeFn(messages, key) {
+          if (debug) console.warn('Unable to localize ' + key + ', not connected to react-localize');
+          return key;
+        };
+      }
+
+      if (isLocalizeProvided) {
+        // doing sanity checks against the inputs, lookup, debug, xLocale are only
+        // supported for the default behavior, when users provide their own override
+        // method we can defer that to them
+        return localizeFn(messages, key, values, xLocale, debug);
+      }
+
       if (!messages || !key) {
@@ -506,10 +522,2 @@ if (debug) console.warn('Unable to localize missing messages or key in arguments.');
 
-      var localizeFn = localize;
-      if (typeof localize !== 'function') {
-        localizeFn = function localizeFn(messages, key) {
-          if (debug) console.warn('Unable to localize ' + key + ', not connected to react-localize');
-          return key;
-        };
-      }
-
       return localizeFn(messages, key, values);
@@ -523,2 +531,5 @@ }, _temp), possibleConstructorReturn(_this, _ret);
       var localize = this._localize;
+      var _props = this.props,
+          xLocale = _props.xLocale,
+          debug = _props.debug;
 
@@ -528,3 +539,3 @@
         Localize.Provider,
-        { value: { localize: localize } },
+        { value: { localize: localize, xLocale: xLocale, debug: debug } },
         this.props.children
@@ -531,0 +542,0 @@ );

dist/react-localize.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.ReactLocalize={},e.React,e.PropTypes)}(this,function(e,d,r){"use strict";d=d&&d.hasOwnProperty("default")?d.default:d,r=r&&r.hasOwnProperty("default")?r.default:r;var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var i="__global_unique_id__",u=function(){return t[i]=(t[i]||0)+1};function a(e){return function(){return e}}var c=function(){};c.thatReturns=a,c.thatReturnsFalse=a(!1),c.thatReturnsTrue=a(!0),c.thatReturnsNull=a(null),c.thatReturnsThis=function(){return this},c.thatReturnsArgument=function(e){return e};var h=c,l=o(function(e,t){t.__esModule=!0;n(d);var a=n(r),c=n(u);n(h);function n(e){return e&&e.__esModule?e:{default:e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function f(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)}var p=1073741823;t.default=function(e,u){var t,n,r="__create-react-context-"+(0,c.default)()+"__",o=function(a){function c(){var e,t,n,r;l(this,c);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];return(e=t=s(this,a.call.apply(a,[this].concat(i)))).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(t){r=r.filter(function(e){return e!==t})},get:function(){return n},set:function(e,t){n=e,r.forEach(function(e){return e(n,t)})}}),s(t,e)}return f(c,a),c.prototype.getChildContext=function(){var e;return(e={})[r]=this.emitter,e},c.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,n=e.value,r=void 0;((o=t)===(i=n)?0!==o||1/o==1/i:o!=o&&i!=i)?r=0:(r="function"==typeof u?u(t,n):p,0!=(r|=0)&&this.emitter.set(e.value,r))}var o,i},c.prototype.render=function(){return this.props.children},c}(d.Component);o.childContextTypes=((t={})[r]=a.default.object.isRequired,t);var i=function(i){function u(){var e,n;l(this,u);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=s(this,i.call.apply(i,[this].concat(r)))).state={value:n.getValue()},n.onUpdate=function(e,t){0!=((0|n.observedBits)&t)&&n.setState({value:n.getValue()})},s(n,e)}return f(u,i),u.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?p:t},u.prototype.componentDidMount=function(){this.context[r]&&this.context[r].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?p:e},u.prototype.componentWillUnmount=function(){this.context[r]&&this.context[r].off(this.onUpdate)},u.prototype.getValue=function(){return this.context[r]?this.context[r].get():e},u.prototype.render=function(){return(Array.isArray(e=this.props.children)?e[0]:e)(this.state.value);var e},u}(d.Component);return i.contextTypes=((n={})[r]=a.default.object,n),{Provider:o,Consumer:i}},e.exports=t.default});n(l);var s=n(o(function(e,t){t.__esModule=!0;var n=o(d),r=o(l);function o(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createContext||r.default,e.exports=t.default}));function f(e){e+="";var i=Array.prototype.slice.call(arguments,1);return i.length&&(e=e.replace(/(%?)(%([jds]))/g,function(e,t,n,r){var o=i.shift();switch(r){case"s":o=""+o;break;case"d":o=+o;break;case"j":o=JSON.stringify(o)}return t?(i.unshift(o),e):o})),i.length&&(e+=" "+i.join(" ")),""+(e=e.replace(/%{2,2}/g,"%"))}var p=function(){function r(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(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),y=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},v=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},b=s({localize:function(e){return e},debug:!0,xLocale:!1}),g=function(e){function i(){var e,t,c;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=c=v(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(r))))._localize=function(e,t){var n=c.props,r=n.localize,o=n.xLocale,i=n.messages,u=n.debug;if(!i||!e)return u&&console.warn("Unable to localize missing messages or key in arguments."),null;if(!i[e])return u&&console.warn("Unable to localize missing messages or key in arguments for "+e),e;if(o)return"XXXXXX";var a=r;return"function"!=typeof r&&(a=function(e,t){return u&&console.warn("Unable to localize "+t+", not connected to react-localize"),t}),a(i,e,t)},v(c,t)}return 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)}(i,d.Component),p(i,[{key:"render",value:function(){return d.createElement(b.Provider,{value:{localize:this._localize}},this.props.children)}}]),i}();g.defaultProps={debug:!1,localize:function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;return n?f(e[t],n):f(e[t])},xLocale:!1};var _=b.Consumer;e.LocalizationProvider=g,e.LocalizationConsumer=_,e.withLocalization=function(n){var e=function(t){return d.createElement(_,null,function(e){return d.createElement(n,y({},t,{localize:e.localize}))})};return e.displayName="withLocalization("+n.name+")",e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.ReactLocalize={},e.React,e.PropTypes)}(this,function(e,d,o){"use strict";d=d&&d.hasOwnProperty("default")?d.default:d,o=o&&o.hasOwnProperty("default")?o.default:o;var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}var i="__global_unique_id__",a=function(){return t[i]=(t[i]||0)+1};function u(e){return function(){return e}}var c=function(){};c.thatReturns=u,c.thatReturnsFalse=u(!1),c.thatReturnsTrue=u(!0),c.thatReturnsNull=u(null),c.thatReturnsThis=function(){return this},c.thatReturnsArgument=function(e){return e};var h=c,l=r(function(e,t){t.__esModule=!0;n(d);var u=n(o),c=n(a);n(h);function n(e){return e&&e.__esModule?e:{default:e}}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function f(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)}var p=1073741823;t.default=function(e,a){var t,n,o="__create-react-context-"+(0,c.default)()+"__",r=function(u){function c(){var e,t,n,o;l(this,c);for(var r=arguments.length,i=Array(r),a=0;a<r;a++)i[a]=arguments[a];return(e=t=s(this,u.call.apply(u,[this].concat(i)))).emitter=(n=t.props.value,o=[],{on:function(e){o.push(e)},off:function(t){o=o.filter(function(e){return e!==t})},get:function(){return n},set:function(e,t){n=e,o.forEach(function(e){return e(n,t)})}}),s(t,e)}return f(c,u),c.prototype.getChildContext=function(){var e;return(e={})[o]=this.emitter,e},c.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,n=e.value,o=void 0;((r=t)===(i=n)?0!==r||1/r==1/i:r!=r&&i!=i)?o=0:(o="function"==typeof a?a(t,n):p,0!=(o|=0)&&this.emitter.set(e.value,o))}var r,i},c.prototype.render=function(){return this.props.children},c}(d.Component);r.childContextTypes=((t={})[o]=u.default.object.isRequired,t);var i=function(i){function a(){var e,n;l(this,a);for(var t=arguments.length,o=Array(t),r=0;r<t;r++)o[r]=arguments[r];return(e=n=s(this,i.call.apply(i,[this].concat(o)))).state={value:n.getValue()},n.onUpdate=function(e,t){0!=((0|n.observedBits)&t)&&n.setState({value:n.getValue()})},s(n,e)}return f(a,i),a.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?p:t},a.prototype.componentDidMount=function(){this.context[o]&&this.context[o].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?p:e},a.prototype.componentWillUnmount=function(){this.context[o]&&this.context[o].off(this.onUpdate)},a.prototype.getValue=function(){return this.context[o]?this.context[o].get():e},a.prototype.render=function(){return(Array.isArray(e=this.props.children)?e[0]:e)(this.state.value);var e},a}(d.Component);return i.contextTypes=((n={})[o]=u.default.object,n),{Provider:r,Consumer:i}},e.exports=t.default});n(l);var s=n(r(function(e,t){t.__esModule=!0;var n=r(d),o=r(l);function r(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createContext||o.default,e.exports=t.default}));function f(e){e+="";var i=Array.prototype.slice.call(arguments,1);return i.length&&(e=e.replace(/(%?)(%([jds]))/g,function(e,t,n,o){var r=i.shift();switch(o){case"s":r=""+r;break;case"d":r=+r;break;case"j":r=JSON.stringify(r)}return t?(i.unshift(r),e):r})),i.length&&(e+=" "+i.join(" ")),""+(e=e.replace(/%{2,2}/g,"%"))}var p=function(){function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}}(),y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},v=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},b=s({localize:function(e){return e},debug:!0,xLocale:!1}),g=function(e){function l(){var e,t,c;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l);for(var n=arguments.length,o=Array(n),r=0;r<n;r++)o[r]=arguments[r];return(t=c=v(this,(e=l.__proto__||Object.getPrototypeOf(l)).call.apply(e,[this].concat(o))))._localize=function(e,t){var n=c.props,o=n.localize,r=n.xLocale,i=n.messages,a=n.debug,u=o;return"function"!=typeof o&&(u=function(e,t){return a&&console.warn("Unable to localize "+t+", not connected to react-localize"),t}),o!==l.defaultProps.localize?u(i,e,t,r,a):i&&e?i[e]?r?"XXXXXX":u(i,e,t):(a&&console.warn("Unable to localize missing messages or key in arguments for "+e),e):(a&&console.warn("Unable to localize missing messages or key in arguments."),null)},v(c,t)}return 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)}(l,d.Component),p(l,[{key:"render",value:function(){var e=this.props;return d.createElement(b.Provider,{value:{localize:this._localize,xLocale:e.xLocale,debug:e.debug}},this.props.children)}}]),l}();g.defaultProps={debug:!1,localize:function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;return n?f(e[t],n):f(e[t])},xLocale:!1};var _=b.Consumer;e.LocalizationProvider=g,e.LocalizationConsumer=_,e.withLocalization=function(n){var e=function(t){return d.createElement(_,null,function(e){return d.createElement(n,y({},t,{localize:e.localize}))})};return e.displayName="withLocalization("+n.name+")",e},Object.defineProperty(e,"__esModule",{value:!0})});

es/react-localize.js

@@ -45,3 +45,19 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+      var isLocalizeProvided = localize !== LocalizationProvider.defaultProps.localize;
 
+      var localizeFn = localize;
+      if (typeof localize !== 'function') {
+        localizeFn = function localizeFn(messages, key) {
+          if (debug) console.warn('Unable to localize ' + key + ', not connected to react-localize');
+          return key;
+        };
+      }
+
+      if (isLocalizeProvided) {
+        // doing sanity checks against the inputs, lookup, debug, xLocale are only
+        // supported for the default behavior, when users provide their own override
+        // method we can defer that to them
+        return localizeFn(messages, key, values, xLocale, debug);
+      }
+
       if (!messages || !key) {
@@ -62,10 +78,2 @@ if (debug) console.warn('Unable to localize missing messages or key in arguments.');
 
-      var localizeFn = localize;
-      if (typeof localize !== 'function') {
-        localizeFn = function localizeFn(messages, key) {
-          if (debug) console.warn('Unable to localize ' + key + ', not connected to react-localize');
-          return key;
-        };
-      }
-
       return localizeFn(messages, key, values);
@@ -79,2 +87,5 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
       var localize = this._localize;
+      var _props = this.props,
+          xLocale = _props.xLocale,
+          debug = _props.debug;
 
@@ -84,3 +95,3 @@
         Localize.Provider,
-        { value: { localize: localize } },
+        { value: { localize: localize, xLocale: xLocale, debug: debug } },
         this.props.children
@@ -87,0 +98,0 @@ );

lib/react-localize.js

@@ -38,3 +38,19 @@ 'use strict';
       const { localize, xLocale, messages, debug } = this.props;
+      const isLocalizeProvided = localize !== LocalizationProvider.defaultProps.localize;
 
+      let localizeFn = localize;
+      if (typeof localize !== 'function') {
+        localizeFn = (messages, key) => {
+          if (debug) console.warn(`Unable to localize ${key}, not connected to react-localize`);
+          return key;
+        };
+      }
+
+      if (isLocalizeProvided) {
+        // doing sanity checks against the inputs, lookup, debug, xLocale are only
+        // supported for the default behavior, when users provide their own override
+        // method we can defer that to them
+        return localizeFn(messages, key, values, xLocale, debug);
+      }
+
       if (!messages || !key) {
@@ -55,10 +71,2 @@ if (debug) console.warn('Unable to localize missing messages or key in arguments.');
 
-      let localizeFn = localize;
-      if (typeof localize !== 'function') {
-        localizeFn = (messages, key) => {
-          if (debug) console.warn(`Unable to localize ${key}, not connected to react-localize`);
-          return key;
-        };
-      }
-
       return localizeFn(messages, key, values);
@@ -70,6 +78,7 @@ }, _temp;
     const { _localize: localize } = this;
+    const { xLocale, debug } = this.props;
 
     return _react2.default.createElement(
       Localize.Provider,
-      { value: { localize } },
+      { value: { localize, xLocale, debug } },
       this.props.children
@@ -76,0 +85,0 @@ );

package.json

 {
   "name": "react-localize",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.2",
   "description": "A simple context wrapper and text localization component for localizing strings",
@@ -20,3 +20,3 @@ "main": "lib/index.js",
     "prepublish": "in-publish && yarn run test && yarn run build || not-in-publish",
-    "test": "jest"
+    "test": "jest --coverage && cat ./coverage/lcov.info | node_modules/.bin/coveralls"
   },
@@ -55,2 +55,3 @@ "repository": {
     "babel-preset-stage-3": "^6.24.1",
+    "coveralls": "3.0.1",
     "cross-env": "^5.2.0",
@@ -62,3 +63,3 @@ "in-publish": "2.0.0",
     "react-dom": "^16.3.0",
-    "react-testing-library": "^3.1.0",
+    "react-testing-library": "^4.0.0",
     "rollup": "^0.45.1",
@@ -65,0 +66,0 @@ "rollup-plugin-babel": "^2.7.1",

README.md

 # react-localize
+A simple React Context wrapper and text localization component
+for localizing strings.
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/sprjr/react-localize.svg)](https://greenkeeper.io/)
-A simple context wrapper and text localization component for localizing strings.
+<p align="center">
+  <a href='https://coveralls.io/github/sprjr/react-localize?branch=master'>
+    <img src='https://coveralls.io/repos/github/sprjr/react-localize/badge.svg?branch=master' alt='React Localize Coverage Status' />
+  </a>
 
-[![Travis build status](http://img.shields.io/travis/sprjr/react-localize.svg?style=flat)](https://travis-ci.org/sprjr/react-localize/)
+  <a href="https://travis-ci.org/sprjr/react-localize">
+    <img src="http://img.shields.io/travis/sprjr/react-localize.svg?style=flat" alt="React Localize Travis Builds" />
+  </a>
 
+  <a href="https://greenkeeper.io/">
+    <img src="https://badges.greenkeeper.io/sprjr/react-localize.svg" alt="React Localize Greenkeeper Status" />
+  </a>
+</p>
+
 ## Getting Started, Quickly:
 
-### Install it from [npm, Inc.](http://www.npmjs.org):
+### Install it from [npm, Inc.*](http://www.npmjs.org):
 `npm i react-localize`
 
-### Use it in your React App (with <Text /> helper):
+_*or via `yarn add react-localize`_
 
+### Wire It Up to Your App:
+
 ```js
 import { LocalizationProvider, LocalizationConsumer } from 'react-localize';
+// this should come from your server or localization strings bundle source
+// for your application.
 const localizationBundle = {
@@ -30,3 +45,3 @@ 'app.button.Submit': 'Submit',
           <h1>{localize('prop.MissingValue')}</h1>
-          <button>{localize('abuttonp.button.Submit')}</button>
+          <button>{localize('app.button.Submit')}</button>
           <p>{localize('foo.bar', ['Stephen', 34])}</p>
@@ -41,85 +56,9 @@ </div>;
 // <div>
-// <h1>prop.MissingValue</h1>
-// <button>Submit</button>
-// <p>Hey Stephen, you must be 34 years old?</p>
+//   <h1>prop.MissingValue</h1>
+//   <button>Submit</button>
+//   <p>Hey Stephen, you must be 34 years old?</p>
+// </div>
 ```
 
-### Use it in your React App Components (via withLocalization() hoc):
-
-```js
-// app.js
-<Localization messages={myBundle}>
-  <YourComponent />
-</Localization>
-
-// YourComponent.jsx
-import TabsMaybe from 'react-bootstrap-tabs-i-guess';
-import { withLocalization } from 'react-localize';
-
-const YourComponent = (props) => {
-  const tabsConfig = props.tabsArray.map((tab) => {
-    return {
-      id: tab.id,
-      message: props.localize(tab.label)
-      onClick: () => props.onTabClick(tab.id)
-    };
-  });
-
-  return <TabsMaybe tabs={tabConfig} />
-};
-
-export default withLocalization(YourComponent);
-```
-
-## More Info & Usage:
-`<LocalizationProvider />` exposes a `localize(key, values)` function that is passed through [ReactJS Context](https://facebook.github.io/react/docs/context.html)
-to all `<LocalizationConsumer />`s in the render tree it wraps. It takes a `messages` property that should be
-formatted like `{ 'mykey.path.to.Value': 'Value' }` or `{ myKey: { path: { to: { Value: 'Value' } } } }`.
-
-
-### withLocalization
-This connector behaves similarly to [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) in that it will take a
-`Component` and wrap it inside of a `<LocalizationConsumer/>` and hoist the `localize` method onto the `props` provided to `<Component />`.
-
-```js
-import { withLocalization } from 'react-localize';
-
-const MyComponent = props => {
-  const {label, localize} = this.props;
-  return <p>
-    <label>{label}</label>
-    <input placeholder={localize('foo')} />;
-  </p>
-};
-
-export default withLocalization(MyComponent);
-```
-
-## Available Props
-
-### xLocale
-If you pass `<LocalizationProvider xLocale />` this short circuits `localize()` calls to always
-return `XXXXXX`. This can be useful for viewing your UI and identifying which parts of the application
-are not using localization.
-
-### debug
-Utilizing `<LocalizationProvider debug />` expands the `localize()` function to include a `console.warn`
-messages when a key cannot be found or when key/messages are not provided to the function when invoked.
-
-### localize
-Internally we do a few sanity checks before invoking a simple format function (similar to util.format)
-provided by default to return key/value results. You can override this behavior by providing your _own_
-`localize(messages, key, values)` function to `<LocalizationProvider />`. This function will be called
-in place of the default one, and you can do any lookup / formatting that you need not provided by the default.
-
-The default `localize()` format function behaves similar to `printf` formatted strings. You can read more
-about how that works on [util.format](https://nodejs.org/api/util.html#util_util_format_format) as well.
-Here's some quick examples:
-
-```js
-util.format('Why hello, %s!', 'Foophen');
-// 'Why hello, Foophen!'
-
-util.format('There are %d things you have to do today', 5)
-// There are 5 things you have to do today
-```
+Please refer to our [gitbook documentation](https://reactlocalize.gitbook.io/docs/)
+for more detailed information & resources.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

766

increased by3.79%

Worsened metrics

Total package byte prevSize

45502

decreased by-0.4%

Dev dependency count

24

increased by4.35%

Number of lines in readme file

63

decreased by-49.19%

No dependency changes