Rename Intl so you can use normal react-intl interface but only use our module

app/javascript/components/formik/MoneyTextField.spec.tsx

@@ -9,9 +9,7 @@ import '@testing-library/jest-dom/extend-expect';
 import {MoneyTextField} from './index';
 import { Field, Formik, useFormikContext } from 'formik';
 import { Money } from '../../common/money';
-import { HoudiniIntlProvider } from '../intl';
-
-
+import { IntlProvider } from '../intl';
 
 
 function FormikInner(props: { onChange:(args:{value:Money})=> void}) {
@@ -29,12 +27,11 @@ function FormikInner(props: { onChange:(args:{value:Money})=> void}) {
 function FormikHandler(props: { onChange:(args:{value:Money})=> void, value: Money}) {
 
 	const {value, ...innerFormikProps} = props;
-	return <HoudiniIntlProvider locale="en">
-
+	return <IntlProvider locale="en">
 		<Formik initialValues={{ value }} onSubmit={() => { console.log("submitted");}} enableReinitialize={true}>
 			<FormikInner {...innerFormikProps} />
 		</Formik>
-	</HoudiniIntlProvider>;
+	</IntlProvider>;
 }
 
 FormikHandler.defaultProps = {

app/javascript/components/formik/MoneyTextField.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import MuiTextField from '@material-ui/core/TextField';
 import { fieldToTextField, TextFieldProps } from 'formik-material-ui';
 import { Money } from "../../common/money";
-import { useHoudiniIntl } from "../intl";
+import { useIntl } from "../intl";
 import { useEffect, useRef } from "react";
 
 import {useI18nCurrencyInput, Types} from '@houdiniproject/react-i18n-currency-input';
@@ -28,7 +28,7 @@ export interface UseSerializeMoneyProps extends Omit<Types.UseI18nCurrencyInputP
  * @param setOutputAmount used for passing up output of the Hook
  */
 export function useSerializeMoney(props:UseSerializeMoneyProps) : ReturnType<typeof useI18nCurrencyInput> {
-	const intl = useHoudiniIntl();
+	const intl = useIntl();
 	const {locale} = intl;
 	const {value, ...other} = props;
 	const {amount, currency} = value;

app/javascript/components/intl/HoudiniIntl.spec.tsx

@@ -1,5 +1,5 @@
 // License: LGPL-3.0-or-later
-import { createHoudiniIntl, FormatMoneyOptions } from "./";
+import { createIntl, FormatMoneyOptions } from "./";
 import { Money } from "../../common/money";
 const NBSP = '\xa0';
 
@@ -7,7 +7,7 @@ let tests:Array<[Money,  FormatMoneyOptions, string]>;
 
 describe('formatMoney', () => {
 	describe('en', () => {
-		const intl = createHoudiniIntl({locale: 'en'});
+		const intl = createIntl({locale: 'en'});
 		const oneDollar = Money.fromCents(100, 'usd');
 		const oneThousandDollars = Money.fromCents(100000, 'usd');
 		const oneThousandDollarsTenCents = Money.fromCents(100010, 'usd');

app/javascript/components/intl/HoudiniIntl.tsx

@@ -1,12 +1,16 @@
 // License: LGPL-3.0-or-later
 
 import * as React from "react";
-import { useIntl, IntlShape, IntlProvider, createIntl} from "react-intl";
+import { useIntl as useIntlParent,
+	IntlShape as IntlShapeParent,
+	IntlProvider as IntlProviderParent,
+	createIntl as createIntlParent} from "react-intl";
 import { Money } from "../../common/money";
-import { HoudiniIntlContext } from "../../hooks/useHoudiniIntl";
-import type {HoudiniIntlShape, FormatMoneyOptions} from '../../hooks/useHoudiniIntl';
+import { IntlContext } from "../../hooks/useIntl";
+import type {IntlShape, FormatMoneyOptions} from '../../hooks/useIntl';
 
-function rawFormatMoney(intl:IntlShape, amount:Money, opts?:FormatMoneyOptions) : string  {
+
+function rawFormatMoney(intl:IntlShapeParent, amount:Money, opts?:FormatMoneyOptions) : string  {
 	const formatter =  intl.formatters.getNumberFormat(intl.locale, {...opts,
 		style: 'currency',
 		currency: amount.currency.toUpperCase(),
@@ -22,31 +26,31 @@ function rawFormatMoney(intl:IntlShape, amount:Money, opts?:FormatMoneyOptions)
  * But includes support for formatting money based on the current locale.
  *
  * @export
- * @param {ConstructorParameters<typeof IntlProvider>[0]} props
+ * @param {ConstructorParameters<typeof IntlProviderParent>[0]} props
  * @returns {JSX.Element}
  */
-export default function HoudiniIntlProvider(props:ConstructorParameters<typeof IntlProvider>[0]) : JSX.Element {
-	return <IntlProvider {...props}>
+export default function IntlProvider(props:ConstructorParameters<typeof IntlProviderParent>[0]) : JSX.Element {
+	return <IntlProviderParent {...props}>
 		<InnerProvider>
 			{props.children}
 		</InnerProvider>
-	</IntlProvider>;
+	</IntlProviderParent>;
 }
 
 function InnerProvider({children}:{children:React.ReactNode}) : JSX.Element {
-	const intl = useIntl();
+	const intl = useIntlParent();
 	const formatMoney = React.useCallback((amount:Money, opts?:FormatMoneyOptions) => {
 		return rawFormatMoney(intl, amount, opts);
 	}, [intl]);
 
 	const houdiniIntl = 	{ ...intl, formatMoney};
-	return <HoudiniIntlContext.Provider value={houdiniIntl}>
+	return <IntlContext.Provider value={houdiniIntl}>
 		{children}
-	</HoudiniIntlContext.Provider>;
+	</IntlContext.Provider>;
 }
 
-export function createHoudiniIntl(...props:Parameters<typeof createIntl>) : HoudiniIntlShape {
-	const intl = createIntl(...props);
+export function createIntl(...props:Parameters<typeof createIntlParent>) : IntlShape {
+	const intl = createIntlParent(...props);
 	const formatMoney = (amount:Money, opts?:FormatMoneyOptions) => rawFormatMoney(intl, amount, opts);
 
 	return {...intl, formatMoney};

app/javascript/components/intl/index.ts

@@ -1,7 +1,5 @@
 // License: LGPL-3.0-or-later
-import useHoudiniIntlDefault from '../../hooks/useHoudiniIntl';
-import HoudiniIntlProviderDefault from './HoudiniIntl';
-export const useHoudiniIntl = useHoudiniIntlDefault;
-export const HoudiniIntlProvider = HoudiniIntlProviderDefault;
-export type {HoudiniIntlShape, FormatMoneyOptions} from '../../hooks/useHoudiniIntl';
-export {createHoudiniIntl} from './HoudiniIntl';
+export * from 'react-intl';
+export {default as useIntl} from '../../hooks/useIntl';
+export type {IntlShape, FormatMoneyOptions} from '../../hooks/useIntl';
+export {default as IntlProvider, createIntl} from './HoudiniIntl';

app/javascript/components/tests/intl/index.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import omit  from 'lodash/omit';
-import { HoudiniIntlProvider} from '../../intl';
+import { IntlProvider} from '../../intl';
 export let _config:any = null;
 
 const EVENT_SET_CONFIG_ID = "intl/set_config";
@@ -59,9 +59,9 @@ class WithIntl extends React.Component<any,any> {
 		}
 
 		return (
-			<HoudiniIntlProvider {...intlConfig} {...customProps}>
+			<IntlProvider {...intlConfig} {...customProps}>
 				{children}
-			</HoudiniIntlProvider>
+			</IntlProvider>
 		);
 	}
 

app/javascript/hooks/useIntl.ts

@@ -1,11 +1,11 @@
 // License: LGPL-3.0-or-later
 import * as React from "react";
-import type { FormatNumberOptions, IntlShape } from "react-intl";
+import type { FormatNumberOptions, IntlShape as ParentIntlShape } from "react-intl";
 import { Money } from "../common/money";
 
-export declare type FormatMoneyOptions = Omit<FormatNumberOptions,'style'|'unit'|'unitDisplay'|'currency'>;
+export type FormatMoneyOptions = Omit<FormatNumberOptions,'style'|'unit'|'unitDisplay'|'currency'>;
 
-export declare type HoudiniIntlShape = IntlShape & {
+export type IntlShape = ParentIntlShape & {
 	/**
 	 * Format a monetary value as a string given the locale
 	 *
@@ -16,15 +16,15 @@ export declare type HoudiniIntlShape = IntlShape & {
 	formatMoney(amount: Money, opts?: FormatMoneyOptions): string;
 };
 
-export const HoudiniIntlContext = React.createContext<HoudiniIntlShape>(null as HoudiniIntlShape);
+export const IntlContext = React.createContext<IntlShape>(null as IntlShape);
 
 /**
  * Use just like `useIntl` for getting strings for the current locale.
  *
  * @export
- * @returns {HoudiniIntlShape}
+ * @returns {IntlShape}
  */
-export default function useHoudiniIntl() : HoudiniIntlShape {
-	const context = React.useContext(HoudiniIntlContext);
+export default function useIntl() : IntlShape {
+	const context = React.useContext(IntlContext);
 	return context;
 }