diff --git a/ts/components/basic/I18n.tsx b/ts/components/basic/I18n.tsx
index 1b82ca51b..5b29dcb71 100644
--- a/ts/components/basic/I18n.tsx
+++ b/ts/components/basic/I18n.tsx
@@ -22,12 +22,14 @@ const formattingTagRegex = new RegExp(
*
* @param token - The token identifying the message to retrieve and an optional record of substitution variables and their replacement values.
* @param args - An optional record of substitution variables and their replacement values. This is required if the string has dynamic parts.
+ * @param as - An optional HTML tag to render the component as. Defaults to a fragment, unless the string contains html tags. In that case, it will render as HTML in a div tag.
*
* @returns The localized message string with substitutions and formatting applied.
*
* @example
* ```tsx
*
+ *
*
* ```
*/
@@ -40,8 +42,10 @@ export const I18n = (props: I18nProps) => {
/** If the string contains a relevant formatting tag, render it as HTML */
if (i18nString.match(formattingTagRegex)) {
- return ;
+ return ;
}
- return <>{i18nString}>;
+ const Comp = props.as ?? React.Fragment;
+
+ return {i18nString};
};
diff --git a/ts/types/Localizer.ts b/ts/types/Localizer.ts
index 4e2242520..383fe5c9f 100644
--- a/ts/types/Localizer.ts
+++ b/ts/types/Localizer.ts
@@ -1,3 +1,4 @@
+import type { ElementType } from 'react';
import type { Dictionary } from '../localization/locales';
/** A localization dictionary key */
@@ -20,9 +21,14 @@ type DynamicArgs =
export type GetMessageArgs =
DynamicArgs extends never ? [T] : [T, ArgsRecord];
+/** Basic props for all calls of the I18n component */
+type I18nBaseProps = { token: T; as?: ElementType };
+
/** The props for the localization component */
export type I18nProps =
- DynamicArgs extends never ? { token: T } : { token: T; args: ArgsRecord };
+ DynamicArgs extends never
+ ? I18nBaseProps
+ : I18nBaseProps & { args: ArgsRecord };
/** The dictionary of localized strings */
export type LocalizerDictionary = Dictionary;