cca-io / rescript-react-intl

ReScript bindings to react-intl

rescript-react-intl

ReScript bindings to react-intl.

To extract messages from ReScript source files for localization, use rescript-react-intl-extractor.

Installation

# yarn
yarn add rescript-react-intl

# or npm
npm install --save rescript-react-intl

Note: If you need a version of the bindings that still supports the old Reason syntax, use the old package name bs-react-intl instead.

Examples

Clone this repo.

yarn install
yarn start

Status

rescript-react-intl should cover all of the react-intl 3.0.0 API. If you find anything missing, please file an issue.

Usage

See examples folder.

rescript-react-intl's Issues

Replace `IntlInjector.js` w/ something REasonable

ATM injectIntl is implemented using JS layer: https://github.com/alexfedoseev/bs-react-intl/blob/master/src/IntlInjector.js

It causes issues with specific configurations of BS target & bundlers.

Ideally, this FFI should be implemented fully in reason.

Repo and package name

@alexfedoseev How shall we go about renaming the repo and npm package?

My suggestion would be to release the next version as rescript-react-intl 3.0.0 and rename the repo to rescript-react-intl, too. But what about the reasonml-community organization? Do you know if it going to be renamed to rescript-community at some point? Otherwise should we move to another org?

Alternatively, we could also create a rescript-react-intl org and put both this repo and the extractor there.

Getting string back rather than react element

There are a few cases where it would be better just to get back the string itself rather than a react element. Currently we're using the ReactIntl.IntlInjector, but it would be nicer to be able to just hit the module e.g. ReactIntl.i18n(<id>. <valueObject>) => string.

I'm not sure how feasible this is with the way it's currently implemented, so I'm tossing this in as an improvement suggestion.

FormattedMessage props

Hi,

First of all, thank you for your work!

It seems you have gone for a different FormattedMessage API than the original react-intl version.

react-intl has

<FormattedMessage id="someId" defaultMessage="the default message" />

but your bindings have

<FormattedMessage message=message />

with message coming from a separate defineMessages dictionary.

What's the reasoning behind this change? Personally, I prefer the original API with the message definitions "inline" in the FormattedMessage props.

description prop

In react-intl, FormattedMessage accepts an optional description prop. Also (see https://github.com/yahoo/react-intl/wiki/Components#message-descriptor),

type MessageDescriptor = {
    id: string,
    defaultMessage?: string,
    description?: string | object,
};

has the optional description field, too, and the defaultMessage seems to be optional as well.

In Reason, we currently have

type message = {
  .
  "id": string,
  "defaultMessage": string,
};

How would we model the two optional fields? I think we would need a makeMessage(Descriptor) function with two optional labeled parameters.

And how do we model the fact that description may be either string or object? [@bs.unwrap] (https://bucklescript.github.io/docs/en/function.html#trick-2-polymorphic-variant-bsunwrap)?

React Native

To use react-intl with react-native, one needs to pass the Text component to IntlProvider's textComponent property:

import { Text } from 'react-native';

<IntlProvider locale={locale} messages={messages} textComponent={Text}>
  ...
</IntlProvider>

This is not currently supported by the bs-react-intl bindings, because the IntlProvider binding expects textComponent to be of type domTag.

It can be worked around using Obj.magic:

[@bs.module "react-native"] external textComponent : ReasonReact.reactClass = "Text";
<ReactIntl.IntlProvider locale messages textComponent=(Obj.magic(textComponent))>
  ...
</ReactIntl.IntlProvider>

But I do not see the benefits of the domTag variant anyway. I would propose to simply change the type of the textComponent to 'a, or alternatively use a variant:

type textComponent =
  | DomTag(string)
  | ReactComponent(ReasonReact.reactClass);

@alexfedoseev Please let me know which way you want to go, then I can prepare a PR.

IntlProvıder's locale property doesn't work correctly, I had to provide it with static locale string to work