Update React hooks to pass custom tx instance

packages/react/README.md

@@ -172,6 +172,23 @@ function Capitalized() {
 }
 ```
 
+Optionally `useT` can take as param a custom Native Instance:
+
+```javascript
+import { useT } from '@transifex/react';
+import { createNativeInstance } from '@transifex/native';
+
+const customTX = createNativeInstance({
+  token: 'token',
+  secret: 'secret',
+});
+
+function Component() {
+  const t = useT(customTX);
+  // ...
+}
+```
+
 ## `useLanguages` hook
 
 Returns a state variable that will eventually hold the supported languages of
@@ -195,6 +212,23 @@ function LanguageList () {
 }
 ```
 
+Optionally `useLanguages` can take as param a custom Native Instance:
+
+```javascript
+import { useT } from '@transifex/react';
+import { createNativeInstance } from '@transifex/native';
+
+const customTX = createNativeInstance({
+  token: 'token',
+  secret: 'secret',
+});
+
+function Component() {
+  const languages = useLanguages(customTX);
+  // ...
+}
+```
+
 ## `useLocale` hook
 
 Returns a state variable with the currently selected locale.
@@ -211,6 +245,23 @@ function DisplayLocale () {
 }
 ```
 
+Optionally `useLocale` can take as param a custom Native Instance:
+
+```javascript
+import { useT } from '@transifex/react';
+import { createNativeInstance } from '@transifex/native';
+
+const customTX = createNativeInstance({
+  token: 'token',
+  secret: 'secret',
+});
+
+function Component() {
+  const locale = useLocale(customTX);
+  // ...
+}
+```
+
 ## `useTX` hook
 
 Returns a state variable with the Native instance.
@@ -344,6 +395,23 @@ function Inner({ ready }) {
 }
 ```
 
+Optionally `useTranslations` can take as a second param a custom Native Instance:
+
+```javascript
+import { useT } from '@transifex/react';
+import { createNativeInstance } from '@transifex/native';
+
+const customTX = createNativeInstance({
+  token: 'token',
+  secret: 'secret',
+});
+
+function Component() {
+  const { ready } = useTranslations('inner', customTX);
+  // ...
+}
+```
+
 ## `TXProvider` provider
 If you need to use more than one Transifex Native instances - like for example if you have a component library - you can use this provider to pass the desired instance to the children components.
 

packages/react/src/hooks/useLanguages.js

@@ -19,10 +19,10 @@ import { TXNativeContext } from '../context/TXNativeContext';
  *   );
  * } */
 
-export default function useLanguages() {
+export default function useLanguages(txInstance) {
   // Check for a different tx initialization
   const context = useContext(TXNativeContext);
-  const instance = context.instance || tx;
+  const instance = txInstance || context.instance || tx;
 
   const [languages, setLanguages] = useState([]);
   useEffect(() => {

packages/react/src/hooks/useLocale.js

@@ -19,10 +19,10 @@ import { TXNativeContext } from '../context/TXNativeContext';
  *   );
  * }
  */
-export default function useLocale() {
+export default function useLocale(txInstance) {
   // Check for a different tx initialization
   const context = useContext(TXNativeContext);
-  const instance = context.instance || tx;
+  const instance = txInstance || context.instance || tx;
 
   const [locale, setLocale] = useState(instance.getCurrentLocale());
 

packages/react/src/hooks/useT.js

@@ -26,10 +26,10 @@ import { TXNativeContext } from '../context/TXNativeContext';
  *   return <span>{translation.toUpperCase()}</span>;
  * } */
 
-export default function useT() {
+export default function useT(txInstance) {
   // Check for a different tx initialization
   const context = useContext(TXNativeContext);
-  const instance = context.instance || tx;
+  const instance = txInstance || context.instance || tx;
 
   const [counter, setCounter] = useState(0);
   useEffect(() => {
@@ -48,7 +48,7 @@ export default function useT() {
   }, [setCounter, instance]);
 
   return useCallback(
-    (_str, props) => translateWithElements(_str, props, context),
-    [context, counter],
+    (_str, props) => translateWithElements(_str, props, instance),
+    [instance, counter],
   );
 }

packages/react/src/hooks/useTranslations.js

@@ -9,10 +9,10 @@ import {
 } from '@transifex/native';
 import { TXNativeContext } from '../context/TXNativeContext';
 
-export default function useTranslations(filterTags) {
+export default function useTranslations(filterTags, txInstance) {
   // Check for a different tx initialization
   const context = useContext(TXNativeContext);
-  const instance = context.instance || tx;
+  const instance = txInstance || context.instance || tx;
 
   const [ready, setReady] = useState(
     (instance.fetchedTags[instance.currentLocale] || []).indexOf(filterTags) !== -1,

packages/react/src/utils/translateWithElements.jsx

@@ -14,13 +14,8 @@ import { t } from '@transifex/native';
   * an array of React elements, each within its unique `key` property and, if
   * there are more than one, will be returned as `<>{result}</>`. */
 
-function translateWithElements(_str, props, context) {
-  let _t = t;
-  if (context && context.instance) {
-    const _tx = context.instance;
-    _t = _tx.t;
-  }
-
+function translateWithElements(_str, props, tx) {
+  const _t = tx.t || t;
   const actualProps = {};
   const reactElements = [];
   if (props) {