From 08c13378e45dcc240c971bfe2a10cd35d5404f09 Mon Sep 17 00:00:00 2001
From: Tomas Carnecky <tomc@caurea.org>
Date: Sun, 6 Jan 2019 20:04:11 +0100
Subject: [PATCH] react-intl: change the FormattedMessage tagName prop to
 accept any ReactType (#31906)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the react-intl source the prop is defined as follows:

    tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.element])

But it's actually passed straight to React.createElement(tagName, …),
so any type that is accepted by createElement should be allowed here.

It is useful to allow passing custom components to FormattedMessage,
for example when you use styled components, eg.

    const FancyHeading = styled('h1')`font-size: 32px`;
    <FormattedMessage … tagName={FancyHeading} />
---
 types/react-intl/index.d.ts           | 2 +-
 types/react-intl/react-intl-tests.tsx | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/types/react-intl/index.d.ts b/types/react-intl/index.d.ts
index aaba74820b..33effbff95 100644
--- a/types/react-intl/index.d.ts
+++ b/types/react-intl/index.d.ts
@@ -146,7 +146,7 @@ declare namespace ReactIntl {
 
         interface Props extends MessageDescriptor {
             values?: {[key: string]: MessageValue | JSX.Element};
-            tagName?: string;
+            tagName?: React.ReactType;
             children?: (...formattedMessage: Array<string | JSX.Element>) => React.ReactNode;
         }
     }
diff --git a/types/react-intl/react-intl-tests.tsx b/types/react-intl/react-intl-tests.tsx
index 63af762e61..bd02a1701b 100644
--- a/types/react-intl/react-intl-tests.tsx
+++ b/types/react-intl/react-intl-tests.tsx
@@ -156,6 +156,13 @@ class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlPro
                 values={{ blank: null, empty: undefined }}
                 tagName="div" />
 
+            <FormattedMessage
+                id="test"
+                description="Test"
+                defaultMessage="Hi {blank} and {empty}!"
+                values={{ blank: null, empty: undefined }}
+                tagName={({ children }) => <div>{children}</div>} />
+
             <FormattedMessage
                 id="test"
                 description="Test"