Merge pull request #205 from transifex/react-hooks-tx-instance

Update React hooks to pass custom tx instance

Author: Nikos Vasileiou

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,11 +14,16 @@ 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) {
+function translateWithElements(_str, props, tx) {
   let _t = t;
-  if (context && context.instance) {
-    const _tx = context.instance;
-    _t = _tx.t;
+
+  if (tx) {
+    // backwards compatible check, in case tx is a provider context
+    if (tx.instance && tx.instance.t) {
+      _t = tx.instance.t;
+    } else if (tx.t) {
+      _t = tx.t;
+    }
   }
 
   const actualProps = {};

packages/react/tests/useT.test.js

@@ -6,8 +6,8 @@ import {
   render, screen, cleanup, fireEvent, act,
 } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { sendEvent, LOCALE_CHANGED } from '@transifex/native';
-import { useT } from '../src';
+import { sendEvent, LOCALE_CHANGED, createNativeInstance } from '@transifex/native';
+import { TXProvider, useT } from '../src';
 
 describe('useT', () => {
   afterEach(() => {
@@ -76,4 +76,42 @@ describe('useT', () => {
       sendEvent(LOCALE_CHANGED);
     });
   });
+
+  it('renders with custom instance', () => {
+    const instance = createNativeInstance();
+    instance.translateLocale = () => 'hello from custom instance';
+
+    const MyComp = () => {
+      const t = useT(instance);
+      const message = t('hello');
+      return (
+        <>
+          <p>{message}</p>
+        </>
+      );
+    };
+    render(<MyComp />);
+    expect(screen.getByText('hello from custom instance')).toBeTruthy();
+  });
+
+  it('renders with provider', () => {
+    const instance = createNativeInstance();
+    instance.translateLocale = () => 'hello from provider';
+
+    const MyComp = () => {
+      const t = useT();
+      const message = t('hello');
+      return (
+        <>
+          <p>{message}</p>
+        </>
+      );
+    };
+    render(
+      <TXProvider instance={instance}>
+        <MyComp />
+      </TXProvider>,
+    );
+    expect(screen.getByText('hello from provider')).toBeTruthy();
+  });
 });