feat(i18n): enable jsx element as prop value (#1008)

Author: baptisteArno

packages/use-i18n/src/__tests__/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "with.identifier": "Are you sure you want to delete {identifier}?",
   "plurals": "You have {numPhotos, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}",
   "subtitle": "Here is a subtitle",
   "tests.test.namespaces": "test",

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -600,4 +600,28 @@ describe('i18n hook', () => {
       expect(result.current.dateFnsLocale?.code).toEqual('en-GB')
     })
   })
+
+  it('should work with a component', async () => {
+    const { result } = renderHook(() => useTranslation([]), {
+      wrapper: wrapper({ defaultLocale: 'en' }),
+    })
+    const CustomComponent = ({ children }: { children: ReactNode }) => (
+      <p style={{ fontWeight: 'bold' }}>{children}</p>
+    )
+
+    await waitFor(() => {
+      expect(
+        result.current.t('with.identifier', { identifier: <b>My resource</b> }),
+      ).toEqual(['Are you sure you want to delete ', <b>My resource</b>, '?'])
+      expect(
+        result.current.t('with.identifier', {
+          identifier: <CustomComponent>My resource</CustomComponent>,
+        }),
+      ).toEqual([
+        'Are you sure you want to delete ',
+        <CustomComponent>My resource</CustomComponent>,
+        '?',
+      ])
+    })
+  })
 })

packages/use-i18n/src/usei18n.tsx

@@ -28,7 +28,7 @@ type TranslationsByLocales = Record<string, BaseLocale>
 
 export type InitialTranslateFn = (
   key: string,
-  context?: Record<string, LocaleValue>,
+  context?: Record<string, LocaleValue | JSX.Element>,
 ) => string
 export type InitialScopedTranslateFn = (
   namespace: string,