React Intl Namespaces

Integrations of react-intl internationalization library with locize.com online translation service.

Goals of this library

add support of dividing your application resources into namespaces that can be lazy loaded from server
make resources statically typed
add support of locize.com in-context editor.
add resource synchronization with locize.com or any other backend.

Getting started

const someNamespace = defineMessages<'property1'>({
  property1: {
    defaultMessage: 'text with {someValue}',
    description: 'description of text with some value',
    id: 'property1',
  },
});

const anotherNamespace = defineMessages<'property1'>({
  property1: {
    defaultMessage: 'another text',
    description: 'description of another text',
    id: 'property1',
  },
});

const values = { someValue: 'value' };

const App = (props: IntlBackendProvider.Props) => (
  <IntlBackendProvider
    locale={props.locale}
    showIds={props.showIds}
    getMessagesFromNamespaceFactory={props.getMessagesFromNamespaceFactory}
    addMissingMessageFactory={props.addMissingMessageFactory}
  >
    <IntlNamespaceProvider namespace="someNamespace">
      <div>
        <FormattedMessage {...someNamespace.property1} values={values} />
      </div>
    </IntlNamespaceProvider>
    <IntlNamespaceProvider namespace="anotherNamespace">
      <div>
        <FormattedMessage {...anotherNamespace.property1} />
      </div>
    </IntlNamespaceProvider>
  </IntlBackendProvider>
);

This code uses two namespaces and provides a way of communication with backed using getMessagesFromNamespace and addMissingMessage API.

Namespaces have have the same resource keys, that do not interfere with each other.

Those namespaces could be application modules.

Also we can see with one switch resource keys instead of resource texts when we set showIds to true. This is what will be displayed

[someNamespace:property1 (someValue)]

instead of formatted

text with value

Building

In order to build this library you have to clone it

git clone https://github.com/maciejw/react-intl-namespaces.git

and restore packages with

yarn

to show sample integration project you can

yarn start

you can also test with

yarn test

Documentation

//TODO

pkoson / react-intl-namespaces Goto Github PK