react-language-context - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/index.es.js

@@ -115,2 +115,15 @@ import React, { Component } from 'react';
   }, {
+    key: '_getReplacedText',
+    value: function _getReplacedText(lang, defaultLang, useDefaultLangInstead) {
+      var replacer = this.props.replacer;
+
+      var text = this._getText(lang, defaultLang, useDefaultLangInstead);
+
+      Object.keys(replacer).forEach(function (key) {
+        text = text.replace(key.toString(), replacer[key]);
+      });
+
+      return text;
+    }
+  }, {
     key: 'render',
@@ -127,3 +140,3 @@ value: function render() {
               useDefaultLangInstead = _ref.useDefaultLangInstead;
-          return _this2._getText(lang, defaultLang, useDefaultLangInstead);
+          return _this2._getReplacedText(lang, defaultLang, useDefaultLangInstead);
         }
@@ -137,6 +150,10 @@ );
 LanguageConsumer.propTypes = {
-  text: PropTypes.object
+  text: PropTypes.object,
+  replacer: PropTypes.object
 };
+LanguageConsumer.defaultProps = {
+  replacer: {}
+};
 
 export { LanguageProvider, LanguageConsumer, LanguageContext };
 //# sourceMappingURL=index.es.js.map

dist/index.es.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.es.js","sources":["../src/components/language-context.js","../src/components/language-context-provider.js","../src/components/language-context-consumer.js"],"sourcesContent":["import React from 'react'\n\nexport const LanguageContext = React.createContext()\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageProvider extends Component {\n  static propTypes = {\n    lang: PropTypes.string,\n    defaultLang: PropTypes.string,\n    useDefaultLangInstead: PropTypes.bool,\n    children: PropTypes.any\n  }\n\n  static defaultProps = {\n    useDefaultLangInstead: false\n  };\n\n  _getLanguageProperties() {\n    const { lang, defaultLang, useDefaultLangInstead } = this.props\n\n    return { lang, defaultLang, useDefaultLangInstead }\n  }\n\n  render() {\n    const {\n      children\n    } = this.props\n\n    return (\n      <LanguageContext.Provider value={this._getLanguageProperties()}>\n        {children}\n      </LanguageContext.Provider>\n    )\n  }\n}","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageConsumer extends Component {\n  static propTypes = {\n    text: PropTypes.object\n  };\n\n  _getText(lang, defaultLang, useDefaultLangInstead) {\n    const { text } = this.props\n    return text[lang] || (useDefaultLangInstead ? text[defaultLang] : '')\n  }\n\n  render() {\n    return (\n      <LanguageContext.Consumer>\n        {({ lang, defaultLang, useDefaultLangInstead }) =>\n          this._getText(lang, defaultLang, useDefaultLangInstead)\n        }\n      </LanguageContext.Consumer>\n    )\n  }\n}\n"],"names":["LanguageContext","React","createContext","LanguageProvider","props","lang","defaultLang","useDefaultLangInstead","children","_getLanguageProperties","Component","propTypes","PropTypes","string","bool","any","defaultProps","LanguageConsumer","text","_getText","object"],"mappings":";;;IAEaA,kBAAkBC,MAAMC,aAAN,EAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICGcC;;;;;;;;;;6CAYM;mBAC8B,KAAKC,KADnC;UACfC,IADe,UACfA,IADe;UACTC,WADS,UACTA,WADS;UACIC,qBADJ,UACIA,qBADJ;;;aAGhB,EAAEF,UAAF,EAAQC,wBAAR,EAAqBC,4CAArB,EAAP;;;;6BAGO;UAELC,QAFK,GAGH,KAAKJ,KAHF,CAELI,QAFK;;;aAML;uBAAA,CAAiB,QAAjB;UAA0B,OAAO,KAAKC,sBAAL,EAAjC;;OADF;;;;EAvB0CC;;AAAzBP,iBACZQ,YAAY;QACXC,UAAUC,MADC;eAEJD,UAAUC,MAFN;yBAGMD,UAAUE,IAHhB;YAIPF,UAAUG;;AALHZ,iBAQZa,eAAe;yBACG;;;ICTNC;;;;;;;;;;6BAKVZ,MAAMC,aAAaC,uBAAuB;UACzCW,IADyC,GAChC,KAAKd,KAD2B,CACzCc,IADyC;;aAE1CA,KAAKb,IAAL,MAAeE,wBAAwBW,KAAKZ,WAAL,CAAxB,GAA4C,EAA3D,CAAP;;;;6BAGO;;;aAEL;uBAAA,CAAiB,QAAjB;;;cACMD,IAAH,QAAGA,IAAH;cAASC,WAAT,QAASA,WAAT;cAAsBC,qBAAtB,QAAsBA,qBAAtB;iBACC,OAAKY,QAAL,CAAcd,IAAd,EAAoBC,WAApB,EAAiCC,qBAAjC,CADD;;OAFL;;;;EAX0CG;;AAAzBO,iBACZN,YAAY;QACXC,UAAUQ;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../src/components/language-context.js","../src/components/language-context-provider.js","../src/components/language-context-consumer.js"],"sourcesContent":["import React from 'react'\n\nexport const LanguageContext = React.createContext()\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageProvider extends Component {\n  static propTypes = {\n    lang: PropTypes.string,\n    defaultLang: PropTypes.string,\n    useDefaultLangInstead: PropTypes.bool,\n    children: PropTypes.any\n  }\n\n  static defaultProps = {\n    useDefaultLangInstead: false\n  };\n\n  _getLanguageProperties() {\n    const { lang, defaultLang, useDefaultLangInstead } = this.props\n\n    return { lang, defaultLang, useDefaultLangInstead }\n  }\n\n  render() {\n    const {\n      children\n    } = this.props\n\n    return (\n      <LanguageContext.Provider value={this._getLanguageProperties()}>\n        {children}\n      </LanguageContext.Provider>\n    )\n  }\n}","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageConsumer extends Component {\n  static propTypes = {\n    text: PropTypes.object,\n    replacer: PropTypes.object\n  };\n\n  static defaultProps = {\n    replacer: {}\n  };\n\n  _getText(lang, defaultLang, useDefaultLangInstead) {\n    const { text } = this.props\n    return text[lang] || (useDefaultLangInstead ? text[defaultLang] : '')\n  }\n\n  _getReplacedText(lang, defaultLang, useDefaultLangInstead) {\n    const { replacer } = this.props\n    let text = this._getText(lang, defaultLang, useDefaultLangInstead)\n\n    Object.keys(replacer).forEach((key) => {\n      text = text.replace(key.toString(), replacer[key])\n    })\n\n    return text\n  }\n\n  render() {\n    return (\n      <LanguageContext.Consumer>\n        {({ lang, defaultLang, useDefaultLangInstead }) =>\n          this._getReplacedText(lang, defaultLang, useDefaultLangInstead)\n        }\n      </LanguageContext.Consumer>\n    );\n  }\n}\n"],"names":["LanguageContext","React","createContext","LanguageProvider","props","lang","defaultLang","useDefaultLangInstead","children","_getLanguageProperties","Component","propTypes","PropTypes","string","bool","any","defaultProps","LanguageConsumer","text","replacer","_getText","keys","forEach","key","replace","toString","_getReplacedText","object"],"mappings":";;;IAEaA,kBAAkBC,MAAMC,aAAN,EAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICGcC;;;;;;;;;;6CAYM;mBAC8B,KAAKC,KADnC;UACfC,IADe,UACfA,IADe;UACTC,WADS,UACTA,WADS;UACIC,qBADJ,UACIA,qBADJ;;;aAGhB,EAAEF,UAAF,EAAQC,wBAAR,EAAqBC,4CAArB,EAAP;;;;6BAGO;UAELC,QAFK,GAGH,KAAKJ,KAHF,CAELI,QAFK;;;aAML;uBAAA,CAAiB,QAAjB;UAA0B,OAAO,KAAKC,sBAAL,EAAjC;;OADF;;;;EAvB0CC;;AAAzBP,iBACZQ,YAAY;QACXC,UAAUC,MADC;eAEJD,UAAUC,MAFN;yBAGMD,UAAUE,IAHhB;YAIPF,UAAUG;;AALHZ,iBAQZa,eAAe;yBACG;;;ICTNC;;;;;;;;;;6BAUVZ,MAAMC,aAAaC,uBAAuB;UACzCW,IADyC,GAChC,KAAKd,KAD2B,CACzCc,IADyC;;aAE1CA,KAAKb,IAAL,MAAeE,wBAAwBW,KAAKZ,WAAL,CAAxB,GAA4C,EAA3D,CAAP;;;;qCAGeD,MAAMC,aAAaC,uBAAuB;UACjDY,QADiD,GACpC,KAAKf,KAD+B,CACjDe,QADiD;;UAErDD,OAAO,KAAKE,QAAL,CAAcf,IAAd,EAAoBC,WAApB,EAAiCC,qBAAjC,CAAX;;aAEOc,IAAP,CAAYF,QAAZ,EAAsBG,OAAtB,CAA8B,UAACC,GAAD,EAAS;eAC9BL,KAAKM,OAAL,CAAaD,IAAIE,QAAJ,EAAb,EAA6BN,SAASI,GAAT,CAA7B,CAAP;OADF;;aAIOL,IAAP;;;;6BAGO;;;aAEL;uBAAA,CAAiB,QAAjB;;;cACMb,IAAH,QAAGA,IAAH;cAASC,WAAT,QAASA,WAAT;cAAsBC,qBAAtB,QAAsBA,qBAAtB;iBACC,OAAKmB,gBAAL,CAAsBrB,IAAtB,EAA4BC,WAA5B,EAAyCC,qBAAzC,CADD;;OAFL;;;;EA3B0CG;;AAAzBO,iBACZN,YAAY;QACXC,UAAUe,MADC;YAEPf,UAAUe;;AAHHV,iBAMZD,eAAe;YACV;;;;;"}

dist/index.js

@@ -122,2 +122,15 @@ 'use strict';
   }, {
+    key: '_getReplacedText',
+    value: function _getReplacedText(lang, defaultLang, useDefaultLangInstead) {
+      var replacer = this.props.replacer;
+
+      var text = this._getText(lang, defaultLang, useDefaultLangInstead);
+
+      Object.keys(replacer).forEach(function (key) {
+        text = text.replace(key.toString(), replacer[key]);
+      });
+
+      return text;
+    }
+  }, {
     key: 'render',
@@ -134,3 +147,3 @@ value: function render() {
               useDefaultLangInstead = _ref.useDefaultLangInstead;
-          return _this2._getText(lang, defaultLang, useDefaultLangInstead);
+          return _this2._getReplacedText(lang, defaultLang, useDefaultLangInstead);
         }
@@ -144,4 +157,8 @@ );
 LanguageConsumer.propTypes = {
-  text: PropTypes.object
+  text: PropTypes.object,
+  replacer: PropTypes.object
 };
+LanguageConsumer.defaultProps = {
+  replacer: {}
+};
 
@@ -148,0 +165,0 @@ exports.LanguageProvider = LanguageProvider;

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/components/language-context.js","../src/components/language-context-provider.js","../src/components/language-context-consumer.js"],"sourcesContent":["import React from 'react'\n\nexport const LanguageContext = React.createContext()\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageProvider extends Component {\n  static propTypes = {\n    lang: PropTypes.string,\n    defaultLang: PropTypes.string,\n    useDefaultLangInstead: PropTypes.bool,\n    children: PropTypes.any\n  }\n\n  static defaultProps = {\n    useDefaultLangInstead: false\n  };\n\n  _getLanguageProperties() {\n    const { lang, defaultLang, useDefaultLangInstead } = this.props\n\n    return { lang, defaultLang, useDefaultLangInstead }\n  }\n\n  render() {\n    const {\n      children\n    } = this.props\n\n    return (\n      <LanguageContext.Provider value={this._getLanguageProperties()}>\n        {children}\n      </LanguageContext.Provider>\n    )\n  }\n}","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageConsumer extends Component {\n  static propTypes = {\n    text: PropTypes.object\n  };\n\n  _getText(lang, defaultLang, useDefaultLangInstead) {\n    const { text } = this.props\n    return text[lang] || (useDefaultLangInstead ? text[defaultLang] : '')\n  }\n\n  render() {\n    return (\n      <LanguageContext.Consumer>\n        {({ lang, defaultLang, useDefaultLangInstead }) =>\n          this._getText(lang, defaultLang, useDefaultLangInstead)\n        }\n      </LanguageContext.Consumer>\n    )\n  }\n}\n"],"names":["LanguageContext","React","createContext","LanguageProvider","props","lang","defaultLang","useDefaultLangInstead","children","_getLanguageProperties","Component","propTypes","PropTypes","string","bool","any","defaultProps","LanguageConsumer","text","_getText","object"],"mappings":";;;;;;;;;;IAEaA,kBAAkBC,eAAMC,aAAN,EAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICGcC;;;;;;;;;;6CAYM;mBAC8B,KAAKC,KADnC;UACfC,IADe,UACfA,IADe;UACTC,WADS,UACTA,WADS;UACIC,qBADJ,UACIA,qBADJ;;;aAGhB,EAAEF,UAAF,EAAQC,wBAAR,EAAqBC,4CAArB,EAAP;;;;6BAGO;UAELC,QAFK,GAGH,KAAKJ,KAHF,CAELI,QAFK;;;aAMLP;uBAAA,CAAiB,QAAjB;UAA0B,OAAO,KAAKQ,sBAAL,EAAjC;;OADF;;;;EAvB0CC;;AAAzBP,iBACZQ,YAAY;QACXC,UAAUC,MADC;eAEJD,UAAUC,MAFN;yBAGMD,UAAUE,IAHhB;YAIPF,UAAUG;;AALHZ,iBAQZa,eAAe;yBACG;;;ICTNC;;;;;;;;;;6BAKVZ,MAAMC,aAAaC,uBAAuB;UACzCW,IADyC,GAChC,KAAKd,KAD2B,CACzCc,IADyC;;aAE1CA,KAAKb,IAAL,MAAeE,wBAAwBW,KAAKZ,WAAL,CAAxB,GAA4C,EAA3D,CAAP;;;;6BAGO;;;aAELL;uBAAA,CAAiB,QAAjB;;;cACMI,IAAH,QAAGA,IAAH;cAASC,WAAT,QAASA,WAAT;cAAsBC,qBAAtB,QAAsBA,qBAAtB;iBACC,OAAKY,QAAL,CAAcd,IAAd,EAAoBC,WAApB,EAAiCC,qBAAjC,CADD;;OAFL;;;;EAX0CG;;AAAzBO,iBACZN,YAAY;QACXC,UAAUQ;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/components/language-context.js","../src/components/language-context-provider.js","../src/components/language-context-consumer.js"],"sourcesContent":["import React from 'react'\n\nexport const LanguageContext = React.createContext()\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageProvider extends Component {\n  static propTypes = {\n    lang: PropTypes.string,\n    defaultLang: PropTypes.string,\n    useDefaultLangInstead: PropTypes.bool,\n    children: PropTypes.any\n  }\n\n  static defaultProps = {\n    useDefaultLangInstead: false\n  };\n\n  _getLanguageProperties() {\n    const { lang, defaultLang, useDefaultLangInstead } = this.props\n\n    return { lang, defaultLang, useDefaultLangInstead }\n  }\n\n  render() {\n    const {\n      children\n    } = this.props\n\n    return (\n      <LanguageContext.Provider value={this._getLanguageProperties()}>\n        {children}\n      </LanguageContext.Provider>\n    )\n  }\n}","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { LanguageContext } from './language-context'\n\nexport default class LanguageConsumer extends Component {\n  static propTypes = {\n    text: PropTypes.object,\n    replacer: PropTypes.object\n  };\n\n  static defaultProps = {\n    replacer: {}\n  };\n\n  _getText(lang, defaultLang, useDefaultLangInstead) {\n    const { text } = this.props\n    return text[lang] || (useDefaultLangInstead ? text[defaultLang] : '')\n  }\n\n  _getReplacedText(lang, defaultLang, useDefaultLangInstead) {\n    const { replacer } = this.props\n    let text = this._getText(lang, defaultLang, useDefaultLangInstead)\n\n    Object.keys(replacer).forEach((key) => {\n      text = text.replace(key.toString(), replacer[key])\n    })\n\n    return text\n  }\n\n  render() {\n    return (\n      <LanguageContext.Consumer>\n        {({ lang, defaultLang, useDefaultLangInstead }) =>\n          this._getReplacedText(lang, defaultLang, useDefaultLangInstead)\n        }\n      </LanguageContext.Consumer>\n    );\n  }\n}\n"],"names":["LanguageContext","React","createContext","LanguageProvider","props","lang","defaultLang","useDefaultLangInstead","children","_getLanguageProperties","Component","propTypes","PropTypes","string","bool","any","defaultProps","LanguageConsumer","text","replacer","_getText","keys","forEach","key","replace","toString","_getReplacedText","object"],"mappings":";;;;;;;;;;IAEaA,kBAAkBC,eAAMC,aAAN,EAAxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICGcC;;;;;;;;;;6CAYM;mBAC8B,KAAKC,KADnC;UACfC,IADe,UACfA,IADe;UACTC,WADS,UACTA,WADS;UACIC,qBADJ,UACIA,qBADJ;;;aAGhB,EAAEF,UAAF,EAAQC,wBAAR,EAAqBC,4CAArB,EAAP;;;;6BAGO;UAELC,QAFK,GAGH,KAAKJ,KAHF,CAELI,QAFK;;;aAMLP;uBAAA,CAAiB,QAAjB;UAA0B,OAAO,KAAKQ,sBAAL,EAAjC;;OADF;;;;EAvB0CC;;AAAzBP,iBACZQ,YAAY;QACXC,UAAUC,MADC;eAEJD,UAAUC,MAFN;yBAGMD,UAAUE,IAHhB;YAIPF,UAAUG;;AALHZ,iBAQZa,eAAe;yBACG;;;ICTNC;;;;;;;;;;6BAUVZ,MAAMC,aAAaC,uBAAuB;UACzCW,IADyC,GAChC,KAAKd,KAD2B,CACzCc,IADyC;;aAE1CA,KAAKb,IAAL,MAAeE,wBAAwBW,KAAKZ,WAAL,CAAxB,GAA4C,EAA3D,CAAP;;;;qCAGeD,MAAMC,aAAaC,uBAAuB;UACjDY,QADiD,GACpC,KAAKf,KAD+B,CACjDe,QADiD;;UAErDD,OAAO,KAAKE,QAAL,CAAcf,IAAd,EAAoBC,WAApB,EAAiCC,qBAAjC,CAAX;;aAEOc,IAAP,CAAYF,QAAZ,EAAsBG,OAAtB,CAA8B,UAACC,GAAD,EAAS;eAC9BL,KAAKM,OAAL,CAAaD,IAAIE,QAAJ,EAAb,EAA6BN,SAASI,GAAT,CAA7B,CAAP;OADF;;aAIOL,IAAP;;;;6BAGO;;;aAELjB;uBAAA,CAAiB,QAAjB;;;cACMI,IAAH,QAAGA,IAAH;cAASC,WAAT,QAASA,WAAT;cAAsBC,qBAAtB,QAAsBA,qBAAtB;iBACC,OAAKmB,gBAAL,CAAsBrB,IAAtB,EAA4BC,WAA5B,EAAyCC,qBAAzC,CADD;;OAFL;;;;EA3B0CG;;AAAzBO,iBACZN,YAAY;QACXC,UAAUe,MADC;YAEPf,UAAUe;;AAHHV,iBAMZD,eAAe;YACV;;;;;;;"}

package.json

 {
   "name": "react-language-context",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Simple library to support multilingualism in react applications using react context.",
@@ -5,0 +5,0 @@ "author": "Petr Třmínek [e-mail]",

README.md

@@ -76,2 +76,3 @@ # react-language-context
 |text            |`object`                       | simple object with keys - values, where key is language and value is text itself|
+|replacer            |`object`                   | simple object with keys - values, where key is regex which you want to replace with value |
 
@@ -86,2 +87,12 @@ *Example of prop text*
 ```
+
+*Example of prop replacer*
+```jsx
+{
+ en:"Hello $1",
+ es:"Hola $1",
+ cs:"Ahoj $1"
+}
+```
+
 *Example of usage*
@@ -109,6 +120,10 @@ ```jsx
 </p>
+
+<h2>
+<LanguageConsumer text={Texts.dynamicHeader}  replacer={{$1: this.state.name}}/>
+</h2>
 ```
 
 #### LanguageContext
-LanguageContext is used in both components LanguageProvider and LanguageConsumer. Most of the time you don't need to use it directly. But sometimes you can have some specific situation. So you can use it as react context and from it you can get 'Consumer'.  With this you are able do pretty much everything. This should be used for components, which require string and not component inside them. For example - `<option>` tag. In context you will find properties from Provider - lang, defaultLang, useDefaultLangInstead.
+LanguageContext is used in both components LanguageProvider and LanguageConsumer. Most of the time you don't need to use it directly. But sometimes you can have some specific situation. So you can use it as react context and from it you can get 'Consumer'.  With this you are able to do pretty much everything. This should be used for components which require string and not component inside them. For example - `<option>` tag. In context you will find properties from Provider - lang, defaultLang, useDefaultLangInstead.
 
@@ -137,4 +152,5 @@ *Example of usage*
   super(props);
-  this.state = { lang:  "en", defaultLang:  "en" };
+  this.state = { lang: "en", defaultLang: "en", name: "Jar Jar" };
   this._handleChange = this._handleChange.bind(this);
+  this._handleChangeName = this._handleChangeName.bind(this);
  }
@@ -145,2 +161,6 @@
  }
+
+ _handleChangeName(event) {
+  this.setState({ name: event.target.value });
+ }
  
@@ -165,2 +185,8 @@ render() {
     </h1>
+    <label>
+     Name: <input type="text" value={this.state.name} onChange={this._handleChangeName} />
+    </label>
+     <h2>
+      <LanguageConsumer text={Texts.dynamicHeader}  replacer={{$1: this.state.name}}/>
+     </h2>
     <p>
@@ -180,2 +206,7 @@ <LanguageConsumer  text={Texts.body}  />
 
+## Release notes
+01.01.2020 - 1.0.0 - first release
+04.01.2020 - 1.1.0 - adds props `replacer` for component **LanguageConsumer**. This prop is used for dynamic translations. See **LanguageConsumer** for more info.
+
+
   
@@ -182,0 +213,0 @@

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25376

15.99%

Lines of code

266

11.76%

Number of lines in readme file

211

17.22%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes