Added variables to translations, updated readme, updated example, version bump

Author: Joao Moura

README.md

@@ -48,23 +48,55 @@ export default translate(SomeComponent)
 
 ## Injected Method
 
-#### translate(key)
+If using the Higher Order Component `translate(SomeComponent)`
+
+#### t(key, params)
 
 | Params        | Type          | Description  |
 | ------------- |:-------------:| ------------ |
-| key   | string        | translation key that identifies the text |
+| key           | string        | translation key that identifies the text |
+| params        | object        | {'param': 'value', ...} each param will be set on the string in its correct location |
+
+
+## Exported Methods
 
+#### setDefaultTranslations(translations)
 
-## Methods
+Sets the translations
+
+| Params        | Type          | Description  |
+| ------------- |:-------------:| ------------ |
+| translations   | object        | {'key': 'translations', ...} |
 
 #### setTranslations(translations)
 
+Same as setDefaultTranslations, but this will update all components using translations
+
 | Params        | Type          | Description  |
 | ------------- |:-------------:| ------------ |
 | translations   | object        | {'key': 'translations', ...} |
 
 #### setDefaultLanguage(key)
 
+Sets the default application language
+
+| Params        | Type          | Description  |
+| ------------- |:-------------:| ------------ |
+| key   | string        | translation key, in this example 'en' or 'pt' |
+
+#### 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' |
+
+#### 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 |

example/component.js

@@ -4,19 +4,21 @@ import * as React from 'react'
 
 // Translation Higher Order Component
 import { translate } from 'react-multi-lang'
+import type { T } from 'react-multi-lang'
 
 type Props = {
-  translate:(string) => string
+  t: T
 }
 
 type State = {}
 
 class SomeComponent extends React.Component<Props, State> {
   render () {
-    const { translate } = this.props
+    const { t } = this.props
     return (
       <div>
-        {translate('About Us')}
+        {t('About Us')}
+        {t('Hello', {name: 'João'})}
       </div>
     )
   }

example/index.js

@@ -4,14 +4,14 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 
 // Translations
-import { setTranslations, setDefaultLanguage } from 'react-multi-lang'
+import { setDefaultTranslations, setDefaultLanguage } from 'react-multi-lang'
 import pt from './translations/pt.json'
 import en from './translations/en.json'
 
 // Translated Component
 import TranslatedComponent from './component'
 
-setTranslations({pt, en})
+setDefaultTranslations({pt, en})
 setDefaultLanguage('en')
 
 ReactDOM.render(

example/translations/en.json

@@ -3,5 +3,6 @@
   "Tides and Activity": "Tides and Activity",
   "Operacional Forecast": "Operacional Forecast",
   "About Us": "About Us",
-  "Share": "Share"
+  "Share": "Share",
+  "Hello": "Hello {name}"
 }

example/translations/pt.json

@@ -3,5 +3,6 @@
   "Tides and Activity": "Marés e Actividade",
   "Operacional Forecast": "Previsão operacional",
   "About Us": "Sobre Nós",
-  "Share": "Pratilhar"
+  "Share": "Pratilhar",
+  "Hello": "Ola {name}"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-lang",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "React Multilanguage Higher-Order Component",
   "main": "lib/index.js",
   "files": [

src/index.js

@@ -18,19 +18,9 @@ export type Translations = {
   }
 }
 
-let translations: Translations = {}
-
-export function setDefaultLanguage (lang: string): void {
-  language = lang
-}
-
-export function setTranslations (userTranslations: Translations): void {
-  translations = userTranslations
-}
+export type T = (key: string, args?: {[string]: string}) => string
 
-export function getText (key: string): string {
-  return translations[language][key]
-}
+let translations: Translations = {}
 
 export function subscribe (cb:() => mixed, id?: string): string {
   const newId = id || uuid.v1()
@@ -47,13 +37,46 @@ export function unsubscribe (id: string) {
   )
 }
 
-export function setLanguage (lang: string) {
-  language = lang
+function triggerSubscriptions (): void {
   subscribes.forEach(
     item => item.cb()
   )
 }
 
+export function setDefaultLanguage (lang: string): void {
+  language = lang
+}
+
+export function setDefaultTranslations (userTranslations: Translations): void {
+  if (Object.keys(translations).length !== 0) {
+    setTranslations(userTranslations)
+    return
+  }
+  translations = userTranslations
+}
+
+export function setTranslations (userTranslations: Translations): void {
+  translations = userTranslations
+  triggerSubscriptions()
+}
+
+export function setLanguage (lang: string) {
+  language = lang
+  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[key])
+      }
+    )
+  }
+  return translation
+}
+
 export function translate (Component: React$ComponentType<*>):React$ComponentType<*> {
   class TranslatedComponet extends React.Component<{}, *> {
     id: string
@@ -70,7 +93,7 @@ export function translate (Component: React$ComponentType<*>):React$ComponentTyp
 
     render () {
       return (
-        <Component {...this.props} translate={(key: string) => getText(key)}/>
+        <Component {...this.props} t={(key: string, args?:{[string]: string}) => t(key, args)}/>
       )
     }
   }
@@ -79,10 +102,12 @@ export function translate (Component: React$ComponentType<*>):React$ComponentTyp
 }
 
 export default {
+  setDefaultLanguage,
   setLanguage,
+  setDefaultTranslations,
+  setTranslations,
   translate,
   subscribe,
   unsubscribe,
-  getText,
-  setTranslations
+  t
 }