@visma/react-intl-helpers
Modular messages.properties, loaded dynamically.
Last updated 2 years ago by arnosaine .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @visma/react-intl-helpers 
SYNC missed versions from official npm registry.

@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>
);

Current Tags

  • 0.1.5                                ...           latest (2 years ago)
  • 0.1.3-patch                                ...           patch (2 years ago)

8 Versions

  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.3-patch                                ...           2 years ago
  • 0.1.2-patch                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 2
Last Month 5
Dependencies (10)
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |