feat: expose Globalize instance via ref

Author: joshswan

package.json

@@ -55,6 +55,7 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.2",
+    "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.2.0",
     "@typescript-eslint/parser": "^4.2.0",
     "cldr-data": "^36.0.0",
@@ -113,8 +114,8 @@
   },
   "release-it": {
     "git": {
-      "commitMessage": "chore: release %s",
-      "tagName": "v%s"
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
     },
     "npm": {
       "publish": true

src/components/GlobalizeProvider.tsx

@@ -6,8 +6,8 @@
  * https://github.com/joshswan/react-native-globalize/blob/master/LICENSE
  */
 
-import React, { useEffect, useState } from 'react';
-import { createGlobalize } from '../globalize';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import { createGlobalize, Globalize } from '../globalize';
 import { GlobalizeContext } from '../context';
 
 export interface Props {
@@ -19,26 +19,19 @@ export interface Props {
   onError?(message: string, exception?: Error): void;
 }
 
-export const GlobalizeProvider: React.FC<Props> = ({
-  children,
-  currency: currencyCode = 'USD',
-  defaultLocale,
-  locale = 'en',
-  localeFallback: fallback = false,
-  ...options
-}) => {
-  const [globalize, setGlobalize] = useState(() =>
-    createGlobalize({
-      ...options,
-      locale,
-      currencyCode,
+export const GlobalizeProvider = React.forwardRef<Globalize, Props>(
+  (
+    {
+      children,
+      currency: currencyCode = 'USD',
       defaultLocale,
-      fallback,
-    }),
-  );
-
-  useEffect(() => {
-    setGlobalize(
+      locale = 'en',
+      localeFallback: fallback = false,
+      ...options
+    },
+    ref,
+  ) => {
+    const [globalize, setGlobalize] = useState(() =>
       createGlobalize({
         ...options,
         locale,
@@ -47,7 +40,21 @@ export const GlobalizeProvider: React.FC<Props> = ({
         fallback,
       }),
     );
-  }, [currencyCode, defaultLocale, locale, fallback]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return <GlobalizeContext.Provider value={globalize}>{children}</GlobalizeContext.Provider>;
-};
+    useEffect(() => {
+      setGlobalize(
+        createGlobalize({
+          ...options,
+          locale,
+          currencyCode,
+          defaultLocale,
+          fallback,
+        }),
+      );
+    }, [currencyCode, defaultLocale, locale, fallback]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useImperativeHandle(ref, () => globalize);
+
+    return <GlobalizeContext.Provider value={globalize}>{children}</GlobalizeContext.Provider>;
+  },
+);

src/components/__tests__/GlobalizeProvider.test.tsx

@@ -8,9 +8,12 @@
 
 import React from 'react';
 import renderer from 'react-test-renderer';
+import type { Globalize } from '../../globalize';
 import { FormattedCurrency, GlobalizeProvider, FormattedUnit } from '..';
 
 describe('<GlobalizeProvider />', () => {
+  jest.useFakeTimers();
+
   test('renders correctly', () => {
     const tree = renderer
       .create(
@@ -59,4 +62,17 @@ describe('<GlobalizeProvider />', () => {
 
     expect(root.toJSON()).toMatchSnapshot();
   });
+
+  test('exposes Globalize instance via ref', () => {
+    const ref = React.createRef<Globalize>();
+
+    renderer.create(
+      <GlobalizeProvider ref={ref} locale="en">
+        <FormattedUnit unit="mile-per-hour" value={75} />
+      </GlobalizeProvider>,
+    );
+
+    expect(ref.current).toHaveProperty('locale', 'en');
+    expect(ref.current?.formatUnit(75, 'mile-per-hour')).toBe('75 miles per hour');
+  });
 });

yarn.lock

@@ -1646,6 +1646,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.0.tgz#9be47b375eeb906fced37049e67284a438d56620"
+  integrity sha512-nvw+F81OmyzpyIE1S0xWpLonLUZCMewslPuA8BtjSKc5XEbn8zEQBXS7KuOLHTNnSOEM2Pum50gHOoZ62tqTRg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.49":
   version "16.9.49"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872"