feat: Add simple wrapper for useIntl

- Add simple wrapper for useIntl

__tests__/__snapshots__/useIntl.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useIntl useIntl used underlying useIntl 1`] = `
+<div>
+  Hello, Eric!
+</div>
+`;
+
+exports[`useIntl with phrase enabled uses wrapped useIntl 1`] = `
+<div>
+  {{__phrase_app.greeting__}}
+</div>
+`;

__tests__/useIntl.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as Utils from '../helper/test_utils';
+import { injectIntl, useIntl } from '../src';
+
+type MessageDescriptor = {
+  id: string;
+  defaultMessage?: string;
+  description?: string | object;
+};
+
+let ComponentUnderTest;
+const messages: Record<string, MessageDescriptor> = {
+  greeting: {
+    id: 'app.greeting',
+    defaultMessage: 'Hello, {name}!',
+    description: 'Greeting to welcome the user to the app',
+  },
+};
+
+describe('useIntl', () => {
+  beforeEach(() => {
+    function Component() {
+      const { formatMessage } = useIntl();
+      return (<div>{formatMessage(messages.greeting, { name: 'Eric' })}</div>);
+    }
+    ComponentUnderTest = injectIntl(Component);
+  });
+
+  describe('useIntl', () => {
+    it('used underlying useIntl', () => {
+      const component = Utils.createComponentWithIntl(<ComponentUnderTest />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('with phrase enabled', () => {
+    beforeEach(() => {
+      Utils.setPhraseConfig();
+    });
+
+    it('uses wrapped useIntl', () => {
+      const component = Utils.createComponentWithIntl(<ComponentUnderTest />);
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl-phraseapp",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "The In-Context-Editor for react using react-intl",
   "main": "dist/react-intl-phraseapp.js",
   "typings": "./dist/index.d.ts",

src/index.ts

@@ -1,3 +1,4 @@
-export { initializePhraseAppEditor } from './functions'
-export { injectIntl, ReactIntlPhraseProps } from './injectIntl'
-export { FormattedMessage } from './FormattedMessage'
+export { initializePhraseAppEditor } from './functions';
+export { injectIntl, ReactIntlPhraseProps } from './injectIntl';
+export { FormattedMessage } from './FormattedMessage';
+export { useIntl } from './useIntl';

src/useIntl.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IntlShape, useIntl as ReactUseIntl } from 'react-intl';
+import { escapeId, isPhraseEnabled } from './functions';
+
+export function useIntl(): IntlShape {
+  if (isPhraseEnabled()) {
+    const intl = ReactUseIntl();
+    function wrappedFormatMessage(...args) {
+      return escapeId(args[0]?.id || '');
+    }
+    return { ...intl, formatMessage: wrappedFormatMessage };
+  } else {
+    return ReactUseIntl();
+  }
+};