React Intl namespaced keys with fallback from specific to general
When using namespaced keys for translations it would be nice to have a fallback when the exact key does not exists but a more generic one.
As seen in the following example it is possible to have specific keys for some component besides a general version for the key.
Example:
const messages = {
"name.space.cancel": "Stop this",
"name.cancel": "Cancel this"
"cancel": "Cancel"
}
The nice thing with react-intl-rns is the build in fallback which means that if you request a specific key but it is not present in the messages object the nearest found parent is used instead. Requesting the key name.space.cancel will find cancel and return it as a translation.
const messages = {
"cancel": "Cancel"
}
import { RNSMessage, rnsShorts } from 'react-intl-rns'
const { rnsM, rnsMS } = rnsShorts('very.long.name.space')
It exists two different find-versions when reducing the namespace: from left and from right
where from left (REDUCE_LTR) is the default. If you want to find the key by reducing the namespace from
right (REDUCE_RTL) you have to use const { rnsM, rnsMS } = rnsShorts('very.long.name.space', 'REDUCE_RTL')
<RNSMessage
id="very.long.name.space.key"
defaultMessage=""
description=""
/>
{ rnsM('key') }
or { rnsM`key` }
When using injectIntl and just translated string should be used
const { intl } = this.props
and then { rnsMS('key')(intl) }
or { rnsMS`key`(intl) }
Thanks for inspiration and code bits from https://github.com/wrwrwr/react-intl-ns