Added nested translations to avoid name colision

Author: Joao Moura

README.md

@@ -38,6 +38,7 @@ class SomeComponent extends React.Component<Props, State> {
     const { translate } = this.props
     return (
       <div>
+        {t('home.Title')}
         {t('Hello', {name: 'João'})}
       </div>
     )
@@ -51,53 +52,52 @@ export default translate(SomeComponent)
 
 If using the Higher Order Component `translate(SomeComponent)`
 
-#### t(key, params)
-
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| key           | string        | translation key that identifies the text |
-| params        | object        | {'param': 'value', ...} each param will be set on the string in its correct location |
+### t(path, params)
 
+Params | Type   | Description
+------ | ------ | ------------------------------------------------------------------------------------
+path   | string | translation path that identifies the text
+params | object | {'param': 'value', ...} each param will be set on the string in its correct location
 
 ## Exported Methods
 
-#### setDefaultTranslations(translations)
+### setDefaultTranslations(translations)
 
 Sets the translations
 
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| translations   | object        | {'key': 'translations', ...} |
+Params       | Type   | Description
+------------ | ------ | ----------------------------
+translations | object | {'key': 'translations', ...}
 
-#### setTranslations(translations)
+### setTranslations(translations)
 
 Same as setDefaultTranslations, but this will update all components using translations
 
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| translations   | object        | {'key': 'translations', ...} |
+Params       | Type   | Description
+------------ | ------ | ----------------------------
+translations | object | {'key': 'translations', ...}
 
-#### setDefaultLanguage(key)
+### setDefaultLanguage(key)
 
 Sets the default application language
 
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| key   | string        | translation key, in this example 'en' or 'pt' |
+Params | Type   | Description
+------ | ------ | ---------------------------------------------
+key    | string | translation key, in this example 'en' or 'pt'
 
-#### setLanguage(key)
+### setLanguage(key)
 
 Same as setDefaultLanguage, but this will update all components using translations
 
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| key   | string        | translation key, in this example 'en' or 'pt' |
+Params | Type   | Description
+------ | ------ | ---------------------------------------------
+key    | string | translation key, in this example 'en' or 'pt'
 
-#### t(key, params)
+### t(key, params)
 
 Get text function, will return the translated string
 
-| Params        | Type          | Description  |
-| ------------- |:-------------:| ------------ |
-| key           | string        | translation key that identifies the text |
-| params        | object        | {'param': 'value', ...} each param will be set on the string in its correct location |
+Params | Type   | Description
+------ | ------ | ------------------------------------------------------------------------------------
+key    | string | translation key that identifies the text
+params | object | {'param': 'value', ...} each param will be set on the string in its correct location

example/component.js

@@ -19,6 +19,7 @@ class SomeComponent extends React.Component<Props, State> {
       <div>
         {t('About Us')}
         {t('Hello', {name: 'João'})}
+        {t('home.Title')}
       </div>
     )
   }

example/translations/en.json

@@ -4,5 +4,8 @@
   "Operacional Forecast": "Operacional Forecast",
   "About Us": "About Us",
   "Share": "Share",
-  "Hello": "Hello {name}"
+  "Hello": "Hello {name}",
+  "home": {
+    "Title": "Translation level 2"
+  }
 }

example/translations/pt.json

@@ -4,5 +4,8 @@
   "Operacional Forecast": "Previsão operacional",
   "About Us": "Sobre Nós",
   "Share": "Pratilhar",
-  "Hello": "Ola {name}"
+  "Hello": "Ola {name}",
+  "home": {
+    "Title": "Tradução nivel 2"
+  }
 }

src/index.js

@@ -15,13 +15,15 @@ type Subscription = {
 
 let subscribes: Subscription[] = []
 
+type Translation = {
+  [string]: string | Translation
+}
+
 export type Translations = {
-  [string]: {
-    [string]: string
-  }
+  [string]: Translation
 }
 
-export type T = (key: string, args?: {[string]: string}) => string
+export type T = (path: string, args?: {[string]: string}) => string
 
 let translations: Translations = {}
 
@@ -70,15 +72,30 @@ export function setLanguage (lang: string) {
   triggerSubscriptions()
 }
 
-export function t (key: string, args?: {[string]: string}): string {
-  let translation = translations[language][key]
-  if (args) {
-    Object.keys(args).forEach(
-      key => {
-        translation = translation.replace(`{${key}}`, args ? args[key]: '')
+export function t (path: string, args?: {[string]: string}): string {
+  const translationKeys: string[] = path.split('.')
+  let translation: string = ''
+  let translationObj: Translation = translations[language]
+
+  translationKeys.forEach(
+    (key: string) => {
+      const temp: string | Translation = translationObj[key]
+      if (typeof temp === 'string') {
+        translation = temp
       }
-    )
+    }
+  )
+
+  if (translation) {
+    if (args) {
+      Object.keys(args).forEach(
+        key => {
+          translation = translation.replace(`{${key}}`, args ? args[key]: '')
+        }
+      )
+    }
   }
+
   return translation
 }