@visma/react-intl-helpers

@visma/react-intl-helpers

Modular messages.properties, loaded dynamically.

Example

webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.properties$/,
        use: "@visma/react-intl-helpers/cjs/loader"
      }
    ]
  }
};

Project structure:

my-app/
  dist/intl/                              // generated
    messages.1f87c6b2907b3c71.json        // defaults
    messages.en-US.64c397a24b33b0e8.json  // defaults + en + en-US
    messages.en.f6ddad6c6db9e386.json     // defaults + en
    messages.fi.7ad0b2e9bd60b8b2.json     // defaults + fi
  src/
    intl/
      messages.properties
      messages_fi.properties
    App.js
  node_modules/some-package/messages/
    messages.properties
    messages_fi.properties
    messages_en.properties
    messages_en_US.properties

Directory should contain only messages[_language[_COUNTRY]].properties files. Files are added automatically to the build, if message ids are imported from messages.properties. Final ids are namespaced - same keys in different directories are allowed.

messages.properties:

title = Intl Example
some.thing = Some thing

Components

<Localize>

prop	Default value	Description
locale	undefined	Application locale, if set.
defaultLocale	'en-US'	Fallback value, if getting value from localStorage or detecting browser locale fails.
onChangeLocale	undefined	Callback function gets called with new value when locale changes.

./src/App.js:

import { Localize } from "@visma/react-intl-helpers";
import { FormattedMessage } from "react-intl";
// Import ids from default(!) messages.
import { someThing } from "some-package/messages/messages.properties";
import messages from "./intl/messages.properties";

export default () => (
  <Localize locale="fi-FI">
    <FormattedMessage id={messages.title} />
    <FormattedMessage id={messages.someThing} />
    <FormattedMessage id={someThing} />
  </Localize>
);

<Selector>

prop	Description
locales	Array of objects containing locale and optionally other properties.
...rest	Rest of the props will be merged to each locale selector item.

./src/App.js:

import { BrowserRouter } from "react-router-dom";
import { Selector } from "@visma/react-intl-helpers";

export default () => (
  <BrowserRouter>
    ...
    <Selector
      locales={[
        { locale: "fi-FI", children: "Suomeksi" },
        { locale: "en-US", children: "English" }
      ]}
      style={{ marginRight: ".4em" }}
    />
    ...
  </BrowserRouter>
);