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;