@tolgee/react 5.4.0 → 5.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolgee/react",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "React implementation for tolgee localization framework",
   "main": "./dist/tolgee-react.cjs.js",
   "module": "./dist/tolgee-react.esm.js",
@@ -32,13 +32,14 @@
   "files": [
     "index.js",
     "lib/**/*",
-    "dist/**/*"
+    "dist/**/*",
+    "src/**/*"
   ],
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.1 || ^18.1.0"
   },
   "dependencies": {
-    "@tolgee/web": "5.4.0"
+    "@tolgee/web": "5.4.1"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^14.1.0",
@@ -47,7 +48,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.1.2",
     "@tolgee/format-icu": "5.4.0",
-    "@tolgee/testing": "5.1.0",
+    "@tolgee/testing": "5.4.1",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.8",
     "@types/react": "^17.0.1",
@@ -80,5 +81,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "7516757f652c038ab2c3a065123226cf9db93510"
+  "gitHead": "baf4fbc39ab12e0a8950231525c9322bc7750879"
 }

package/src/GlobalContextPlugin.tsx

@@ -0,0 +1,19 @@
+import type { TolgeePlugin } from '@tolgee/web';
+import { DEFAULT_REACT_OPTIONS } from './TolgeeProvider';
+import type { ReactOptions, TolgeeReactContext } from './types';
+
+let globalContext: TolgeeReactContext | undefined;
+
+export const GlobalContextPlugin =
+  (options?: Partial<ReactOptions>): TolgeePlugin =>
+  (tolgee) => {
+    globalContext = {
+      tolgee,
+      options: { ...DEFAULT_REACT_OPTIONS, ...options },
+    };
+    return tolgee;
+  };
+
+export function getGlobalContext() {
+  return globalContext;
+}

package/src/T.tsx

@@ -0,0 +1,39 @@
+import { NsType, TranslateParams } from '@tolgee/web';
+import React, { FunctionComponent } from 'react';
+import { addReactKeys, wrapTagHandlers } from './tagsTools';
+
+import { ParamsTags } from './types';
+import { useTranslateInternal } from './useTranslateInternal';
+
+type TProps = {
+  params?: TranslateParams<ParamsTags>;
+  children?: string;
+  noWrap?: boolean;
+  keyName?: string;
+  ns?: NsType;
+  defaultValue?: string;
+};
+
+export const T: FunctionComponent<TProps> = (props: TProps) => {
+  const key = props.keyName || props.children;
+  if (key === undefined) {
+    // eslint-disable-next-line no-console
+    console.error('T component: keyName not defined');
+  }
+  const defaultValue =
+    props.defaultValue || (props.keyName ? props.children : undefined);
+
+  const { t } = useTranslateInternal();
+
+  const translation = addReactKeys(
+    t({
+      key: key!,
+      params: wrapTagHandlers(props.params),
+      defaultValue,
+      noWrap: props.noWrap,
+      ns: props.ns,
+    })
+  );
+
+  return <>{translation}</>;
+};

package/src/TolgeeProvider.spec.tsx

@@ -0,0 +1,106 @@
+jest.autoMockOff();
+
+import { Tolgee, TolgeeInstance, TolgeePlugin } from '@tolgee/web';
+
+import '@testing-library/jest-dom';
+import React from 'react';
+import { TolgeeProvider } from './TolgeeProvider';
+
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { createResolvablePromise } from '@tolgee/testing/createResolvablePromise';
+
+describe('Tolgee Provider Component', () => {
+  let mockedTolgee: TolgeeInstance;
+
+  beforeEach(() => {
+    mockedTolgee = {
+      ...Tolgee().init({ language: 'en' }),
+      run: jest.fn(() => new Promise<void>(() => {})),
+      stop: jest.fn(),
+    };
+  });
+
+  test('renders loadingFallback', async () => {
+    act(() => {
+      render(
+        <TolgeeProvider
+          tolgee={mockedTolgee}
+          fallback={<>loading</>}
+          options={{ useSuspense: false }}
+        />
+      );
+    });
+    await waitFor(() => {
+      screen.getByText('loading');
+    });
+  });
+
+  test('runs tolgee', async () => {
+    act(() => {
+      render(<TolgeeProvider tolgee={mockedTolgee} fallback="loading" />);
+    });
+    expect(mockedTolgee.run).toHaveBeenCalledTimes(1);
+  });
+
+  test('stops tolgee', () => {
+    const { unmount } = render(<TolgeeProvider tolgee={mockedTolgee} />);
+    unmount();
+    expect(mockedTolgee.stop).toHaveBeenCalledTimes(1);
+  });
+
+  test("doesn't render when everything is already fetched", async () => {
+    const tolgee = Tolgee().init({
+      language: 'en',
+      staticData: {
+        en: {},
+      },
+    });
+    act(() => {
+      render(
+        <TolgeeProvider tolgee={tolgee} fallback={<>loading</>}>
+          It's rendered!
+        </TolgeeProvider>
+      );
+    });
+    await waitFor(async () => {
+      screen.getByText("It's rendered!");
+      const loading = screen.queryByText('loading');
+      expect(loading).toBeNull();
+    });
+  });
+
+  test('renders fallback when language is being fetched', async () => {
+    const language = createResolvablePromise('en');
+
+    const storagePlugin: TolgeePlugin = (tolgee, { setLanguageStorage }) => {
+      setLanguageStorage({
+        getLanguage() {
+          return language.promise;
+        },
+        setLanguage() {},
+      });
+      return tolgee;
+    };
+    const tolgee = Tolgee()
+      .use(storagePlugin)
+      .init({
+        defaultLanguage: 'en',
+        staticData: {
+          en: {},
+        },
+      });
+    render(
+      <TolgeeProvider tolgee={tolgee} fallback="Loading...">
+        It's rendered!
+      </TolgeeProvider>
+    );
+    await waitFor(async () => {
+      expect(screen.getByText('Loading...')).toBeTruthy();
+    });
+    await act(async () => {
+      language.resolve();
+      await language.promise;
+    });
+    expect(screen.getByText("It's rendered!")).toBeTruthy();
+  });
+});

package/src/TolgeeProvider.tsx

@@ -0,0 +1,60 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { TolgeeInstance } from '@tolgee/web';
+import { ReactOptions, TolgeeReactContext } from './types';
+
+export const DEFAULT_REACT_OPTIONS: ReactOptions = {
+  useSuspense: true,
+};
+
+export const TolgeeProviderContext = React.createContext<
+  TolgeeReactContext | undefined
+>(undefined);
+
+type Props = {
+  children?: React.ReactNode;
+  tolgee: TolgeeInstance;
+  options?: ReactOptions;
+  fallback?: React.ReactNode;
+};
+
+export const TolgeeProvider: React.FC<Props> = ({
+  tolgee,
+  options,
+  children,
+  fallback,
+}) => {
+  const [loading, setLoading] = useState(!tolgee.isLoaded());
+
+  useEffect(() => {
+    tolgee.run().then(() => {
+      setLoading(false);
+    });
+    return () => {
+      tolgee.stop();
+    };
+  }, [tolgee]);
+
+  const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };
+
+  if (optionsWithDefault.useSuspense) {
+    return (
+      <TolgeeProviderContext.Provider
+        value={{ tolgee, options: optionsWithDefault }}
+      >
+        {loading ? (
+          fallback
+        ) : (
+          <Suspense fallback={fallback || null}>{children}</Suspense>
+        )}
+      </TolgeeProviderContext.Provider>
+    );
+  }
+
+  return (
+    <TolgeeProviderContext.Provider
+      value={{ tolgee, options: optionsWithDefault }}
+    >
+      {loading ? fallback : children}
+    </TolgeeProviderContext.Provider>
+  );
+};

package/src/__integration/T.spec.tsx

@@ -0,0 +1,138 @@
+import { act } from 'react-dom/test-utils';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { TolgeeProvider, DevTools, TolgeeInstance, Tolgee } from '../index';
+import { FormatIcu } from '@tolgee/format-icu';
+import { mockCoreFetch } from '@tolgee/testing/fetchMock';
+
+import { T } from '../index';
+
+const API_URL = 'http://localhost';
+const API_KEY = 'dummyApiKey';
+
+const fetch = mockCoreFetch();
+
+describe('T component integration', () => {
+  let tolgee: TolgeeInstance;
+  const TestComponent = () => {
+    return (
+      <>
+        <div data-testid="peter_dogs">
+          <T keyName="peter_dogs" params={{ dogsCount: 5 }} />
+        </div>
+        <div data-testid="hello_world">
+          <T>hello_world</T>
+        </div>
+        <div data-testid="hello_world_no_wrap">
+          <T noWrap>hello_world</T>
+        </div>
+        <div data-testid="non_existant">
+          <T keyName="non_existant">Non existant</T>
+        </div>
+        <div data-testid="default_value_in_params">
+          <T keyName="non_existant" defaultValue="Non existant" />
+        </div>
+        <div data-testid="with_tags">
+          <T keyName="with_tags" params={{ b: <b />, i: <i /> }} />
+        </div>
+        <div data-testid="with_tag">
+          <T
+            keyName="with_tag"
+            params={{
+              b: (text: string) => <b title={text}>{text}</b>,
+            }}
+          />
+        </div>
+      </>
+    );
+  };
+
+  beforeEach(async () => {
+    fetch.enableMocks();
+    tolgee = Tolgee().use(DevTools()).use(FormatIcu()).init({
+      apiUrl: API_URL,
+      apiKey: API_KEY,
+      language: 'cs',
+      fallbackLanguage: 'en',
+    });
+    act(() => {
+      render(
+        <TolgeeProvider tolgee={tolgee} fallback="Loading...">
+          <TestComponent />
+        </TolgeeProvider>
+      );
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId('hello_world')?.textContent).toContain(
+        'Ahoj světe!'
+      );
+      expect(screen.queryByTestId('hello_world')).toHaveAttribute(
+        '_tolgee',
+        'true'
+      );
+    });
+  });
+
+  it('wraps translation correctly', async () => {
+    expect(screen.queryByTestId('hello_world')).toContainHTML('Ahoj světe!');
+    expect(screen.queryByTestId('hello_world')).toHaveAttribute('_tolgee');
+  });
+
+  it('works with no wrap', () => {
+    expect(screen.queryByTestId('hello_world_no_wrap')).toContainHTML(
+      'Ahoj světe!'
+    );
+    expect(screen.queryByTestId('hello_world_no_wrap')).not.toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
+  it('works with parameters', () => {
+    expect(screen.queryByTestId('peter_dogs')).toContainHTML('Petr má 5 psů.');
+    expect(screen.queryByTestId('peter_dogs')).toHaveAttribute('_tolgee');
+  });
+
+  it('works with default value', async () => {
+    expect(screen.queryByTestId('non_existant')).toContainHTML('Non existant');
+    expect(screen.queryByTestId('non_existant')).toHaveAttribute('_tolgee');
+  });
+
+  it('works with default value in params', async () => {
+    expect(screen.queryByTestId('default_value_in_params')).toContainHTML(
+      'Non existant'
+    );
+    expect(screen.queryByTestId('default_value_in_params')).toHaveAttribute(
+      '_tolgee'
+    );
+  });
+
+  it('works with tags', () => {
+    expect(screen.queryByTestId('with_tags')).toContainHTML(
+      'Tento <b>text <i>je</i> formátovaný</b>'
+    );
+    expect(screen.queryByTestId('with_tags')).toHaveAttribute('_tolgee');
+  });
+
+  it('works with tag as function', () => {
+    expect(screen.queryByTestId('with_tag')).toContainHTML(
+      '<b title="bold">bold</b>'
+    );
+    expect(screen.queryByTestId('with_tag')).toHaveAttribute('_tolgee');
+  });
+
+  describe('language switch', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        await tolgee.changeLanguage('en');
+      });
+    });
+
+    it('changes translation with tags', () => {
+      expect(screen.queryByTestId('with_tags')).toContainHTML(
+        'This <b>text <i>is</i> formatted</b>'
+      );
+      expect(screen.queryByTestId('with_tags')).toHaveAttribute('_tolgee');
+    });
+  });
+});

package/src/__integration/TolgeeProvider.spec.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { act } from 'react-dom/test-utils';
+import {
+  DevTools,
+  Tolgee,
+  TolgeeInstance,
+  TolgeeProvider,
+  useTranslate,
+} from '..';
+import { render, screen, waitFor } from '@testing-library/react';
+import { mockCoreFetchAsync } from '@tolgee/testing/fetchMock';
+
+const API_URL = 'http://localhost';
+const API_KEY = 'dummyApiKey';
+
+describe('TolgeeProvider integration', () => {
+  const TestComponent = () => {
+    const { t } = useTranslate();
+    return (
+      <>
+        <div data-testid="hello_world">{t('hello_world')}</div>
+        <div data-testid="english_fallback">
+          {t('english_fallback', 'Default value')}
+        </div>
+        <div data-testid="non_existant">
+          {t('non_existant', 'Default value')}
+        </div>
+      </>
+    );
+  };
+
+  describe('regular settings', () => {
+    let resolveEnglish: any;
+    let resolveCzech: any;
+    let tolgee: TolgeeInstance;
+
+    beforeEach(async () => {
+      const fetchMock = mockCoreFetchAsync();
+      resolveCzech = fetchMock.csTranslations.resolve;
+      resolveEnglish = fetchMock.enTranslations.resolve;
+      fetchMock.fetch.enableMocks();
+      tolgee = Tolgee().use(DevTools()).init({
+        apiUrl: API_URL,
+        apiKey: API_KEY,
+        language: 'cs',
+        fallbackLanguage: 'en',
+      });
+
+      act(() => {
+        render(
+          <TolgeeProvider tolgee={tolgee} fallback="Loading...">
+            <TestComponent />
+          </TolgeeProvider>
+        );
+      });
+    });
+
+    afterEach(() => {
+      tolgee.stop();
+    });
+
+    it('shows correctly loading, fallback and default value', async () => {
+      expect(screen.queryByText('Loading...')).toBeInTheDocument();
+      act(() => {
+        resolveCzech();
+      });
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).toBeInTheDocument();
+      });
+      act(() => {
+        resolveEnglish();
+      });
+      await waitFor(() => {
+        expect(screen.queryByTestId('hello_world')).toContainHTML(
+          'Ahoj světe!'
+        );
+        expect(screen.queryByTestId('english_fallback')).toContainHTML(
+          'English fallback'
+        );
+        expect(screen.queryByTestId('non_existant')).toContainHTML(
+          'Default value'
+        );
+      });
+    });
+  });
+
+  describe('with fallback', () => {
+    let resolveEnglish: any;
+    let resolveCzech: any;
+    let tolgee: TolgeeInstance;
+
+    beforeEach(async () => {
+      const fetchMock = mockCoreFetchAsync();
+      resolveCzech = fetchMock.csTranslations.resolve;
+      resolveEnglish = fetchMock.enTranslations.resolve;
+      fetchMock.fetch.enableMocks();
+      tolgee = Tolgee().use(DevTools()).init({
+        apiUrl: API_URL,
+        apiKey: API_KEY,
+        language: 'cs',
+        fallbackLanguage: 'en',
+      });
+      act(() => {
+        render(
+          <TolgeeProvider tolgee={tolgee} fallback="Loading...">
+            <TestComponent />
+          </TolgeeProvider>
+        );
+      });
+    });
+
+    it('shows correctly loading, fallback and default value', async () => {
+      expect(screen.queryByText('Loading...')).toBeInTheDocument();
+      act(() => {
+        resolveCzech();
+      });
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).toBeInTheDocument();
+        expect(screen.queryByTestId('hello_world')).not.toBeInTheDocument();
+      });
+      act(() => {
+        resolveEnglish();
+      });
+      await waitFor(() => {
+        expect(screen.queryByTestId('hello_world')).toContainHTML(
+          'Ahoj světe!'
+        );
+        expect(screen.queryByTestId('english_fallback')).toContainHTML(
+          'English fallback'
+        );
+        expect(screen.queryByTestId('non_existant')).toContainHTML(
+          'Default value'
+        );
+      });
+    });
+  });
+});

package/src/__integration/namespaces.spec.tsx

@@ -0,0 +1,119 @@
+import { mockStaticDataAsync } from '@tolgee/testing/mockStaticData';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { DevTools, useTranslate } from '..';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { Tolgee, TolgeeInstance } from '@tolgee/web';
+import { FormatIcu } from '@tolgee/format-icu';
+import { GlobalContextPlugin } from '../GlobalContextPlugin';
+
+jest.autoMockOff();
+
+const API_URL = 'http://localhost';
+
+describe('useTranslations namespaces', () => {
+  let tolgee: TolgeeInstance;
+  const TestComponent = () => {
+    const { t, isLoading } = useTranslate('test');
+
+    return (
+      <>
+        {isLoading && <div data-testid="loading">Loading...</div>}
+        <div data-testid="test">{t('test')}</div>
+        <div data-testid="test_english_fallback">
+          {t('test_english_fallback')}
+        </div>
+        <div data-testid="non_existant">
+          {t('non_existant', 'Non existant')}
+        </div>
+        <div data-testid="ns_fallback">{t('fallback', { ns: 'invalid' })}</div>
+      </>
+    );
+  };
+
+  let staticDataMock: ReturnType<typeof mockStaticDataAsync>;
+
+  beforeEach(async () => {
+    staticDataMock = mockStaticDataAsync();
+    tolgee = Tolgee()
+      .use(GlobalContextPlugin({ useSuspense: false }))
+      .use(DevTools())
+      .use(FormatIcu())
+      .init({
+        apiUrl: API_URL,
+        language: 'cs',
+        fallbackLanguage: 'en',
+        fallbackNs: 'fallback',
+        staticData: staticDataMock.promises,
+      });
+
+    await act(async () => {
+      const runPromise = tolgee.run();
+      staticDataMock.resolvablePromises.cs.resolve();
+      staticDataMock.resolvablePromises.en.resolve();
+      staticDataMock.resolvablePromises['en:fallback'].resolve();
+      await runPromise;
+      render(<TestComponent />);
+    });
+  });
+
+  afterEach(() => {
+    tolgee.stop();
+  });
+
+  it('loads namespace after render', async () => {
+    expect(screen.queryByTestId('loading')).toContainHTML('Loading...');
+    staticDataMock.resolveAll();
+    await waitFor(() => {
+      expect(screen.queryByTestId('loading')).toBeFalsy();
+      expect(screen.queryByTestId('test')).toContainHTML('Český test');
+      expect(screen.queryByTestId('test')).toHaveAttribute('_tolgee');
+    });
+  });
+
+  it('works with english fallback', async () => {
+    staticDataMock.resolveAll();
+    await waitFor(() => {
+      expect(screen.queryByTestId('test_english_fallback')).toContainHTML(
+        'Test english fallback'
+      );
+      expect(screen.queryByTestId('test_english_fallback')).toHaveAttribute(
+        '_tolgee'
+      );
+    });
+  });
+
+  it('works with ns fallback', async () => {
+    expect(screen.queryByTestId('ns_fallback')).toContainHTML('fallback');
+    staticDataMock.resolveAll();
+    await waitFor(() => {
+      expect(screen.queryByTestId('ns_fallback')).toContainHTML('Fallback');
+      expect(screen.queryByTestId('ns_fallback')).toHaveAttribute('_tolgee');
+    });
+  });
+
+  it('works with language and ns fallback', async () => {
+    expect(screen.queryByTestId('ns_fallback')).toContainHTML(
+      'Fallback fallback'
+    );
+    await act(async () => {
+      const changePromise = tolgee.changeLanguage('en');
+      staticDataMock.resolveAll();
+      await changePromise;
+    });
+    expect(screen.queryByTestId('ns_fallback')).toContainHTML(
+      'Fallback fallback'
+    );
+  });
+
+  it('works with default value', async () => {
+    staticDataMock.resolveAll();
+    await waitFor(() => {
+      expect(screen.queryByTestId('non_existant')).toContainHTML(
+        'Non existant'
+      );
+      expect(screen.queryByTestId('non_existant')).toHaveAttribute('_tolgee');
+    });
+  });
+});

package/src/__integration/useTolgee.spec.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { DevTools, useTolgee, GlobalContextPlugin } from '..';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { Tolgee, TolgeeEvent, TolgeeInstance } from '@tolgee/web';
+import { FormatIcu } from '@tolgee/format-icu';
+import { mockStaticDataAsync } from '@tolgee/testing/mockStaticData';
+
+const API_URL = 'http://localhost';
+
+type CheckStateProps = Partial<Record<TolgeeEvent, string>>;
+
+const checkState = (props: CheckStateProps) => {
+  Object.entries(props).forEach(([event, value]) => {
+    expect(screen.queryByTestId(event)).toContainHTML(value);
+  });
+};
+
+describe('useTranslation hook integration', () => {
+  let tolgee: TolgeeInstance;
+  let runPromise: Promise<void>;
+  let staticDataMock: ReturnType<typeof mockStaticDataAsync>;
+  const TestComponent = ({ events }: { events?: TolgeeEvent[] }) => {
+    const {
+      getLanguage,
+      getPendingLanguage,
+      isFetching,
+      isLoading,
+      isRunning,
+      isInitialLoading,
+    } = useTolgee(events);
+
+    return (
+      <>
+        <div data-testid="language">{String(getLanguage())}</div>
+        <div data-testid="pendingLanguage">{String(getPendingLanguage())}</div>
+        <div data-testid="fetching">{String(isFetching())}</div>
+        <div data-testid="loading">{String(isLoading())}</div>
+        <div data-testid="initialLoad">{String(isInitialLoading())}</div>
+        <div data-testid="running">{String(isRunning())}</div>
+      </>
+    );
+  };
+
+  beforeEach(async () => {
+    staticDataMock = mockStaticDataAsync();
+
+    tolgee = Tolgee()
+      .use(DevTools())
+      .use(GlobalContextPlugin())
+      .use(FormatIcu())
+      .init({
+        apiUrl: API_URL,
+        language: 'cs',
+        staticData: staticDataMock.promises,
+      });
+    runPromise = tolgee.run();
+  });
+
+  afterEach(() => {
+    tolgee.stop();
+  });
+
+  it('updates initialLoading', async () => {
+    render(<TestComponent events={['initialLoad']} />);
+    checkState({ initialLoad: 'true' });
+
+    await act(async () => {
+      staticDataMock.resolvablePromises.cs.resolve();
+      await runPromise;
+    });
+    await waitFor(() => {
+      checkState({ initialLoad: 'false' });
+    });
+    await act(async () => {
+      tolgee.changeLanguage('en');
+      staticDataMock.resolvablePromises.en.resolve();
+    });
+    await waitFor(() => {
+      checkState({ initialLoad: 'false' });
+    });
+  });
+
+  it('updates language', async () => {
+    render(<TestComponent events={['language']} />);
+    await act(async () => {
+      staticDataMock.resolvablePromises.cs.resolve();
+      await runPromise;
+    });
+    checkState({ language: 'cs' });
+    await act(async () => {
+      tolgee.changeLanguage('en');
+      staticDataMock.resolvablePromises.en.resolve();
+    });
+    checkState({ language: 'en' });
+  });
+
+  it('updates pending language', async () => {
+    render(<TestComponent events={['pendingLanguage']} />);
+    await act(async () => {
+      staticDataMock.resolvablePromises.cs.resolve();
+      await runPromise;
+    });
+    checkState({ language: 'cs', pendingLanguage: 'cs' });
+    await act(async () => {
+      tolgee.changeLanguage('en');
+      staticDataMock.resolvablePromises.en.resolve();
+    });
+    await waitFor(async () => {
+      checkState({ language: 'cs', pendingLanguage: 'en' });
+    });
+  });
+
+  it('updates fetching and loading', async () => {
+    render(<TestComponent events={['fetching', 'loading']} />);
+    checkState({ loading: 'true', fetching: 'true' });
+
+    await act(async () => {
+      staticDataMock.resolvablePromises.cs.resolve();
+      await runPromise;
+    });
+    await waitFor(async () => {
+      checkState({ loading: 'false', fetching: 'false' });
+    });
+    await act(async () => {
+      tolgee.changeLanguage('en');
+    });
+    await waitFor(() => {
+      checkState({ loading: 'false', fetching: 'true' });
+    });
+    await act(async () => {
+      staticDataMock.resolvablePromises.en.resolve();
+    });
+    await waitFor(async () => {
+      checkState({ loading: 'false', fetching: 'false' });
+    });
+    await act(async () => {
+      tolgee.addActiveNs('test');
+    });
+    await waitFor(() => {
+      checkState({ loading: 'true', fetching: 'true' });
+    });
+    await act(async () => {
+      staticDataMock.resolvablePromises['en:test'].resolve();
+    });
+    await waitFor(async () => {
+      checkState({ loading: 'false', fetching: 'false' });
+    });
+  });
+});

package/src/__integration/useTranslation.spec.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { DevTools, useTranslate, GlobalContextPlugin } from '..';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { Tolgee, TolgeeInstance } from '@tolgee/web';
+import { FormatIcu } from '@tolgee/format-icu';
+import { mockCoreFetch } from '@tolgee/testing/fetchMock';
+
+const API_URL = 'http://localhost';
+const API_KEY = 'dummyApiKey';
+
+const fetch = mockCoreFetch();
+
+describe('useTranslation hook integration', () => {
+  let tolgee: TolgeeInstance;
+  const TestComponent = () => {
+    const { t } = useTranslate();
+
+    expect(typeof t('peter_dogs', { dogsCount: '5' })).toEqual('string');
+    expect(typeof t('non_existant', '<i>non_formatted</i>')).toEqual('string');
+    expect(
+      typeof t('non_existant', '<i>{parameter}</i>', { parameter: 'test' })
+    ).toEqual('string');
+
+    return (
+      <>
+        <div data-testid="peter_dogs">
+          {t('peter_dogs', { dogsCount: '5' })}
+        </div>
+        <div data-testid="hello_world">{t('hello_world')}</div>
+        <div data-testid="hello_world_no_wrap">
+          {t({ key: 'hello_world', noWrap: true })}
+        </div>
+        <div data-testid="non_existant">
+          {t('non_existant', 'Non existant')}
+        </div>
+        <div data-testid="non_formatted">
+          {t('non_existant', '<i>non_formatted</i>')}
+        </div>
+      </>
+    );
+  };
+
+  beforeEach(async () => {
+    fetch.enableMocks();
+    tolgee = Tolgee()
+      .use(DevTools())
+      .use(GlobalContextPlugin({ useSuspense: false }))
+      .use(FormatIcu())
+      .init({
+        apiUrl: API_URL,
+        apiKey: API_KEY,
+        language: 'cs',
+        fallbackLanguage: 'en',
+      });
+    tolgee.run();
+    act(() => {
+      render(<TestComponent />);
+    });
+    await waitFor(() => {
+      expect(screen.queryByTestId('hello_world')).toContainHTML('Ahoj světe!');
+    });
+  });
+
+  afterEach(() => {
+    tolgee.stop();
+  });
+
+  it('wraps translation correctly', async () => {
+    await waitFor(() => {
+      expect(screen.queryByTestId('hello_world')).toContainHTML('Ahoj světe!');
+      expect(screen.queryByTestId('hello_world')).toHaveAttribute('_tolgee');
+    });
+  });
+
+  it('works with noWrap', async () => {
+    await waitFor(() => {
+      expect(screen.queryByTestId('hello_world_no_wrap')).toContainHTML(
+        'Ahoj světe!'
+      );
+      expect(screen.queryByTestId('hello_world_no_wrap')).not.toHaveAttribute(
+        '_tolgee'
+      );
+    });
+  });
+
+  it('works with parameters', async () => {
+    await waitFor(() => {
+      expect(screen.queryByTestId('peter_dogs')).toContainHTML(
+        'Petr má 5 psů.'
+      );
+      expect(screen.queryByTestId('peter_dogs')).toHaveAttribute('_tolgee');
+    });
+  });
+
+  it('works with default value', async () => {
+    expect(screen.queryByTestId('non_existant')).toContainHTML('Non existant');
+    expect(screen.queryByTestId('non_existant')).toHaveAttribute('_tolgee');
+  });
+
+  it('works with tags in default value', async () => {
+    await waitFor(() => {
+      expect(screen.queryByTestId('non_formatted')?.textContent).toContain(
+        '<i>non_formatted</i>'
+      );
+    });
+    expect(screen.queryByTestId('non_formatted')).toHaveAttribute('_tolgee');
+  });
+
+  describe('language switch', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        await tolgee.changeLanguage('en');
+      });
+    });
+
+    it('changes translation', async () => {
+      expect(screen.queryByTestId('hello_world')).toContainHTML('Hello world!');
+      expect(screen.queryByTestId('hello_world')).toHaveAttribute('_tolgee');
+    });
+  });
+});

package/src/hooks.ts

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export const useRerender = () => {
+  const [instance, setCounter] = useState(0);
+
+  const rerender = useCallback(() => {
+    setCounter((num) => num + 1);
+  }, [setCounter]);
+  return { instance, rerender };
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export { useTranslate } from './useTranslate';
+export { TolgeeProvider, TolgeeProviderContext } from './TolgeeProvider';
+export { T } from './T';
+export { useTolgee } from './useTolgee';
+export { GlobalContextPlugin } from './GlobalContextPlugin';
+export * from './types';
+
+export * from '@tolgee/web';

package/src/tagsTools.tsx

@@ -0,0 +1,43 @@
+import { TranslateParams } from '@tolgee/web';
+import React from 'react';
+
+import { ParamsTags } from './types';
+
+export const wrapTagHandlers = (
+  params: TranslateParams<ParamsTags> | undefined
+) => {
+  if (!params) {
+    return undefined;
+  }
+
+  const result: any = {};
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    if (typeof value === 'function') {
+      result[key] = (chunk: any) => {
+        return value(addReactKeys(chunk));
+      };
+    } else if (React.isValidElement(value as any)) {
+      const el = value as React.ReactElement;
+      result[key] = (chunk: any) => {
+        return el.props.children !== undefined
+          ? React.cloneElement(el)
+          : React.cloneElement(el, {}, addReactKeys(chunk));
+      };
+    } else {
+      result[key] = value;
+    }
+  });
+
+  return result;
+};
+
+export const addReactKeys = (
+  val: React.ReactNode | React.ReactNode[] | undefined
+) => {
+  if (Array.isArray(val)) {
+    return React.Children.toArray(val);
+  } else {
+    return val;
+  }
+};

package/src/types.ts

@@ -0,0 +1,16 @@
+import type { DefaultParamType, TolgeeInstance } from '@tolgee/web';
+import React from 'react';
+
+export type ParamsTags =
+  | DefaultParamType
+  | ((value: any) => JSX.Element | React.ReactElement | null)
+  | React.ReactNode;
+
+export type ReactOptions = {
+  useSuspense: boolean;
+};
+
+export type TolgeeReactContext = {
+  tolgee: TolgeeInstance;
+  options: ReactOptions;
+};

package/src/useTolgee.ts

@@ -0,0 +1,19 @@
+import { TolgeeEvent, TolgeeInstance } from '@tolgee/web';
+import { useEffect } from 'react';
+import { useRerender } from './hooks';
+import { useTolgeeContext } from './useTolgeeContext';
+
+export const useTolgee = (events?: TolgeeEvent[]): TolgeeInstance => {
+  const { tolgee } = useTolgeeContext();
+
+  const { rerender } = useRerender();
+
+  useEffect(() => {
+    const listeners = events?.map((e) => tolgee.on(e, rerender));
+    return () => {
+      listeners?.forEach((listener) => listener.unsubscribe());
+    };
+  }, [events?.join(':')]);
+
+  return tolgee;
+};

package/src/useTolgeeContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { getGlobalContext } from './GlobalContextPlugin';
+import { TolgeeProviderContext } from './TolgeeProvider';
+
+export const useTolgeeContext = () => {
+  const context = useContext(TolgeeProviderContext) || getGlobalContext();
+  if (!context) {
+    throw new Error(
+      "Couldn't find tolgee instance, did you forgot to use `TolgeeProvider`?"
+    );
+  }
+  return context;
+};

package/src/useTranslate.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { TFnType, getTranslateProps, DefaultParamType } from '@tolgee/web';
+
+import { useTranslateInternal } from './useTranslateInternal';
+import { ReactOptions } from './types';
+
+export const useTranslate = (
+  ns?: string[] | string,
+  options?: ReactOptions
+) => {
+  const { t: tInternal, isLoading } = useTranslateInternal(ns, options);
+
+  const t: TFnType<DefaultParamType, string> = useCallback(
+    (...params: any) => {
+      // @ts-ignore
+      const props = getTranslateProps(...params);
+      return tInternal(props);
+    },
+    [tInternal]
+  );
+
+  return { t, isLoading };
+};

package/src/useTranslateInternal.ts

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  SubscriptionSelective,
+  TranslateProps,
+  NsFallback,
+  getFallbackArray,
+  getFallback,
+} from '@tolgee/web';
+
+import { useTolgeeContext } from './useTolgeeContext';
+import { ReactOptions } from './types';
+import { useRerender } from './hooks';
+
+export const useTranslateInternal = (
+  ns?: NsFallback,
+  options?: ReactOptions
+) => {
+  const { tolgee, options: defaultOptions } = useTolgeeContext();
+  const namespaces = getFallback(ns);
+  const namespacesJoined = getFallbackArray(namespaces).join(':');
+
+  const currentOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  // dummy state to enable re-rendering
+  const { rerender, instance } = useRerender();
+
+  const subscriptionRef = useRef<SubscriptionSelective>();
+
+  const subscriptionQueue = useRef([] as NsFallback[]);
+  subscriptionQueue.current = [];
+
+  const subscribeToNs = (ns: NsFallback) => {
+    subscriptionQueue.current.push(ns);
+    subscriptionRef.current?.subscribeNs(ns);
+  };
+
+  const isLoaded = tolgee.isLoaded(namespaces);
+
+  useEffect(() => {
+    const subscription = tolgee.onNsUpdate(rerender);
+    subscriptionRef.current = subscription;
+    if (!isLoaded) {
+      subscription.subscribeNs(namespaces);
+    }
+    subscriptionQueue.current.forEach((ns) => {
+      subscription!.subscribeNs(ns);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [isLoaded, namespacesJoined, tolgee]);
+
+  useEffect(() => {
+    tolgee.addActiveNs(namespaces);
+    return () => tolgee.removeActiveNs(namespaces);
+  }, [namespacesJoined, tolgee]);
+
+  const t = useCallback(
+    (props: TranslateProps<any>) => {
+      const fallbackNs = props.ns ?? namespaces?.[0];
+      subscribeToNs(fallbackNs);
+      return tolgee.t({ ...props, ns: fallbackNs }) as any;
+    },
+    [tolgee, instance]
+  );
+
+  if (currentOptions.useSuspense && !isLoaded) {
+    throw tolgee.addActiveNs(namespaces, true);
+  }
+
+  return { t, isLoading: !isLoaded };
+};