node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »



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.


const messages = {
  "": "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 will find cancel and return it as a translation.

const messages = {
  "cancel": "Cancel"


import { RNSMessage, rnsShorts } from 'react-intl-rns'
const { rnsM, rnsMS } = rnsShorts('')

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('', 'REDUCE_RTL')


{ 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