Merge branch 'master' of github.com:JWebCoder/react-multi-lang

Author: JWebCoder

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
   "spellright.language": [
-    "en"
+    "English (American)"
   ],
   "spellright.documentTypes": [
-    "markdown",
     "latex",
-    "plaintext"
+    "plaintext",
+    "markdown"
   ]
 }

README.md

@@ -73,56 +73,81 @@ class SomeComponent extends React.Component<Props> {
 export default withTranslation(SomeComponent)
 ```
 
-## Translation Method t(path, params)
+## Auto update functions
 
-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
+### useTranslation(basePath)
+
+React hook that returns the t function
+
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+basePath | string | translation base path used to identify all the next requested translations | no
+
+### withTranslation(component, basePath)
+
+HOC that injects the translation function into the component
+
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+component | React Component | React component that requires the translation function | yes
+basePath | string | translation base path used to identify all the next requested translations | no
+
+## Translation Method
+
+t(path, params)
+
+Returns the translation for the requested path
+
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+path | string | translation path that identifies the text | yes
+params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no
 
 ## Exported Methods
 
 ### setDefaultTranslations(translations)
 
 Sets the translations
 
-Params       | Type   | Description
------------- | ------ | ----------------------------
-translations | object | {'key': 'translations', ...}
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+translations | object | {'key': 'translations', ...} | yes
 
 ### setTranslations(translations)
 
 Same as setDefaultTranslations, but this will update all components using translations
 
-Params       | Type   | Description
------------- | ------ | ----------------------------
-translations | object | {'key': 'translations', ...}
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+translations | object | {'key': 'translations', ...} | yes
 
 ### setDefaultLanguage(key)
 
 Sets the default application language
 
-Params | Type   | Description
------- | ------ | ---------------------------------------------
-key    | string | translation key, in this example 'en' or 'pt'
+Params | Type | Description | Required
+---- | ---- | ---- | ----
+key    | string | translation key, in this example 'en' or 'pt' | yes
 
 ### 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 | Required
+---- | ---- | ---- | ----
+key    | string | translation key, in this example 'en' or 'pt' | yes
 
 ### getLanguage()
 
 Returns the current selected language
 
 ### t(key, params)
 
-Get text function, will return the translated string
+t(path, params)
+
+Returns the translation for the requested path
 
-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 | Required
+---- | ---- | ---- | ----
+path | string | translation path that identifies the text | yes
+params | object | {'param': 'value', ...} each parameter will be set on the string in its correct location | no

package-lock.json

@@ -36,7 +36,7 @@
     "@types/react": "^16.8.20",
     "react": "^16.8.6",
     "rimraf": "^2.6.3",
-    "tslint": "^5.17.0",
+    "tslint": "^6.1.0",
     "typescript": "^3.5.2",
     "utility-types": "^3.7.0"
   },

package.json

@@ -20,6 +20,8 @@ interface ITranslation {
   [key: string]: string | ITranslation
 }
 
+export interface ITranslationParams {[key: string]: string}
+
 export interface ITranslations {
   [key: string]: ITranslation
 }
@@ -80,7 +82,7 @@ export function getLanguage(): string {
   return language
 }
 
-export function t(path: string, args?: {[key: string]: string}): string {
+export function t(path: string, args?: ITranslationParams): string {
   const translationKeys: string[] = path.split('.')
   let translation: string = ''
   if (translations[language]) {
@@ -118,12 +120,13 @@ export function useTranslation(basePath?: string) {
     const subId = subscribe(() => forceUpdate())
     return () => unsubscribe(subId)
   }, [forceUpdate])
-  return (path: string, args?: {[key: string]: string}) =>
+  return (path: string, args?: ITranslationParams) =>
     t(basePath ? (basePath + '.' + path) : path, args)
 }
 
 export function withTranslation<P extends ITranslate>(
-  Component: React.ComponentType<Pick<P, SetDifference<keyof P, 't'>>>
+  Component: React.ComponentType<Pick<P, SetDifference<keyof P, 't'>>>,
+  basePath?: string
 ): React.ComponentType<Subtract<P, ITranslate>> {
   class TranslatedComponent extends React.Component<Subtract<P, ITranslate>> {
     public id: number | undefined
@@ -139,7 +142,13 @@ export function withTranslation<P extends ITranslate>(
     }
 
     public render() {
-      return <Component {...this.props as P} t={t}/>
+      return <Component
+        {...this.props as P}
+        t={
+          (path: string, args?: ITranslationParams) =>
+            t(basePath ? (basePath + '.' + path) : path, args)
+        }
+      />
     }
   }