Merge pull request #475 from macabeus/feat/add-use-translate

(@fluent/react) Add useTranslate

Author: stasm

fluent-react/example/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Localized } from "@fluent/react";
 import { FluentDateTime } from "@fluent/bundle";
 import { Hello } from "./Hello";
-import { LocalizedSignIn } from "./SignIn";
+import { SignIn } from "./SignIn";
 
 export function App() {
     let [date] = useState(() => new Date());
@@ -36,6 +36,6 @@ export function App() {
             </p>
         </Localized>
 
-        <LocalizedSignIn />
+        <SignIn />
     </>;
 }

fluent-react/example/src/SignIn.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Localized, withLocalization, WithLocalizationProps } from "@fluent/react";
+import { Localized, useLocalization } from "@fluent/react";
+
+export function SignIn() {
+  const { l10n } = useLocalization()
 
-function SignIn(props: WithLocalizationProps) {
   function showAlert(id: string) {
-    const { getString } = props;
-    alert(getString(id));
+    alert(l10n.getString(id));
   }
 
   return (
@@ -21,5 +22,3 @@ function SignIn(props: WithLocalizationProps) {
     </div>
   );
 }
-
-export const LocalizedSignIn = withLocalization(SignIn);

fluent-react/src/index.ts

@@ -22,3 +22,4 @@ export { LocalizationProvider } from "./provider";
 export { withLocalization, WithLocalizationProps } from "./with_localization";
 export { Localized, LocalizedProps } from "./localized";
 export { MarkupParser } from "./markup";
+export { useLocalization } from "./use_localization";

fluent-react/src/use_localization.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { FluentContext } from "./context";
+import { ReactLocalization } from "./localization";
+
+/*
+* The `useLocalization` hook returns the FluentContext
+*/
+type useLocalization = () => { l10n: ReactLocalization }
+export const useLocalization: useLocalization = () => {
+  const l10n = useContext(FluentContext);
+
+  return { l10n };
+};

fluent-react/test/use_localization.test.js

@@ -0,0 +1,57 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { FluentBundle, FluentResource } from "@fluent/bundle";
+import { ReactLocalization, LocalizationProvider, useLocalization } from "../esm/index";
+
+function DummyComponent() {
+  const { l10n } = useLocalization();
+
+  return (
+    <p>{l10n.getString('foo')}</p>
+  );
+}
+
+describe("useLocalization", () => {
+  test("render inside of a LocalizationProvider", () => {
+    const renderer = TestRenderer.create(
+      <LocalizationProvider l10n={new ReactLocalization([])}>
+        <DummyComponent />
+      </LocalizationProvider>
+    );
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        foo
+      </p>
+    `);
+  });
+
+  test("render outside of a LocalizationProvider", () => {
+    const renderer = TestRenderer.create(<DummyComponent />);
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        foo
+      </p>
+    `);
+  });
+
+  test("useLocalization exposes getString from ReactLocalization", () => {
+    const bundle = new FluentBundle("en", { useIsolating: false });
+    bundle.addResource(
+      new FluentResource(`
+foo = FOO
+`)
+    );
+
+    const renderer = TestRenderer.create(
+      <LocalizationProvider l10n={new ReactLocalization([bundle])}>
+        <DummyComponent />
+      </LocalizationProvider>
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`
+      <p>
+        FOO
+      </p>
+    `);
+  });
+});