react-intl - accessing nested messages

Question

I'm trying to use react-intl package inside an app. The app is rendered on the server so I wrote some code to determine which language to use and serve into IntlProvider.

Translations were provided in messages.js file and they look like this:

export default {
  en: {
    message: '...some message',
    nested: {
      anotherMessage: '...another message',
    }
  }
  de: {
    // ...
  }
}

What I do is something like this:

// import messages from './messages.js'
// Check the locale for the user (based on cookies or other things)
const locale = ...
// Get the required messages
const messagesForLocale= = messages[locale];
// Supply the messages to the IntlProvider
<IntlProvider locale={locale} messages={messagesForLocale}>
  // ...
</IntlProvider>

Then when I use FormattedMessage component I can't access the nested message (anotherMessage) with code like this:

<FormattedMessage id="nested.anotherMessage" ... />

But message is accessible.

Any ideas where I made the mistake, or maybe I'm missing something in the whole concept?

score 18 · Accepted Answer · edited Sep 07 '19 at 11:41

18

Since React Intl v2 no longer supports nested messages objects, the messages need to be flattening.

export const flattenMessages = ((nestedMessages, prefix = '') => {
  if (nestedMessages === null) {
    return {}
  }
  return Object.keys(nestedMessages).reduce((messages, key) => {
    const value       = nestedMessages[key]
    const prefixedKey = prefix ? `${prefix}.${key}` : key

    if (typeof value === 'string') {
      Object.assign(messages, { [prefixedKey]: value })
    } else {
      Object.assign(messages, flattenMessages(value, prefixedKey))
    }

    return messages
  }, {})
})

// Use flattenMessages
<IntlProvider locale={locale} messages={flattenMessages(messagesForLocale)}>

refs:

edited Sep 07 '19 at 11:41

Soroush Chehresa

3,630
1
10
23

answered Aug 26 '17 at 09:39

banyan

2,881
2
22
20

2

Thanks for that. We decided to go with `I18next` as this seems to be a more flexible library. – Ancinek Aug 26 '17 at 11:13
Thank you so much! – vuvu Jan 08 '21 at 14:34
Didn't know that `react-intl` started at Yahoo! – Camilo Mar 03 '21 at 00:38

score 10 · Answer 2 · edited Mar 03 '21 at 00:43

react-intl does not support nested messages anymore. If you still want to organize your messages that way, you can use the flat library to correct your messages structure beforehand.

import flatten from 'flat'

<IntlProvider locale={locale} messages={flatten(messagesForLocale)}>

A contributor of react-intl claims that the main reason for only supporting a flat message structure is:

Simplicity and flexibility is the main reason. With the flat object, people can write whatever message ids/keys they want and they won't be interpreted with special semantics.

View the issue Support nested messages-object comment on GitHub.

score 1 · Answer 3 · answered Jun 12 '18 at 06:39

1

Yes, customization using flattenMessages is the best way I found.

Here is the video demo for your reference.

https://egghead.io/lessons/react-convert-a-hard-coded-string-using-react-intl-formattedmessage

answered Jun 12 '18 at 06:39

Krupal Patel

396
3
12

react-intl - accessing nested messages

3 Answers3

Linked