Use Trans-component on array

[lkgoerges]

Hello,

in one of my namespace json files I have long text split as an array so it's more readable.

{
    "long-text": "some real long text"
}

=>

{
    "long-text":  [
        "some",
        "real",
        "long",
        "text"
    ]
}

It also contains components that needs to be inserted.

{
    "long-text":  [
        "some",
        "<0>real</0>",
        "long",
        "text"
    ]
}

So I have to use the Trans-component

<Trans
    i18nKey="ns:long-text"
    components={[<br/>]}
    values={{price: config.price}}/>

Obviously it doesn't render.
If it didn't require components to be inserted I could use the t-function with the returnObjects: true flag.

But as far as I know this is not possible with the Trans-component.
And I really don't want to write the long text in one line as it would make it absolutely unreadable.
Are there any workarounds to that issue?

[aralroca]

@lkgoerges I suppose something like that would work, although it's not very elegant....

import useTranslation from 'next-translate/useTranslation'
import DynamicNamespaces from 'next-translate/DynamicNamespaces'
import Trans from 'next-translate/Trans'

function Example() {
  const { t } = useTranslation('ns')
  // array to object ['a', 'b'] to { 0: 'a', 1: 'b' }
  const longTextNs = { ...t('long-text', {}, { returnObjects: true }) }

  return (
    <I18nProvider namespaces={{ longTextNs }}>
      <Trans
        i18nKey="longTextNs:1" // by array index
        components={[<b />]}
      />
    </I18nProvider>
  )
}

Basically, it creates a new provider with a new namespace with the contents of the array. Within the I18nProvider you can use all the namespaces you already had plus the new one, they all fit together.

Another example with .join(' ') (maybe useful for components props inside Trans component).

function AnotherExample() {
  const { t } = useTranslation('ns')
  const longText = t('long-text', {}, { returnObjects: true }).join(' ')

  return (
    <I18nProvider namespaces={{ newNs: { longText } }}>
      <Trans i18nKey="newNs:longText" components={[<b />]} />
    </I18nProvider>
  )
}

[lkgoerges]

Hey,

thanks @aralroca ! Your suggestion really helped me!
I created a helper component and it works just as intended.

/// Imports
import {ReactElement} from 'react';
import Trans from 'next-translate/Trans';
import I18nProvider from 'next-translate/I18nProvider';
import useTranslation from 'next-translate/useTranslation';


/// Interfaces
interface II18nArrayMerge {
    ns: string
    i18nKey: string
    components?: ReactElement[]
    values?: {[key: string]: string}
}


/// Helper components
export function TransFromArray({ns, i18nKey, components, values}: II18nArrayMerge) {
    const {t} = useTranslation(ns);
    const i18nObject = t(i18nKey, {}, {returnObjects: true}) as string[];
    const merged = i18nObject.join('');
    return (
        <I18nProvider namespaces={{newNs: {merged}}}>
            <Trans
                i18nKey="newNs:merged"
                components={components}
                values={values}/>
        </I18nProvider>
    );
}

That way I can use it the same way I use the Trans-component:

<TransFromArray
    ns="someNs"
    i18nKey="someKey"
    components={[<br/>]}
    values={{price: config.price}}
/>