Get the package:
# yarn
yarn add --dev @ahrefs/bs-react-intl-ppx
# or npm
npm install --save-dev @ahrefs/bs-react-intl-ppx
Then add it to bsconfig.json
:
"ppx-flags": ["@ahrefs/bs-react-intl-ppx/ppx"],
This ppx allows you to create ReactIntl.messages
records without specifying id
, which significantly reduces the amount of boilerplate code and simplifies the translation process.
Examples:
This code
let message: ReactIntl.message = [%intl "i am message"]
will be compiled to the (javascript):
var message = {
id: "168c9a2987fad481c5882847ac102aaf",
defaultMessage: "i am message"
};
Ppx also supports descripted messages:
let descriptedMessage: ReactIntl.message = [%intl {msg: "blabla", desc: "i am description"}]
Usage with rescript-react-intl
// Some component
[@react.component]
let make = () => {
let intl = ReactIntl.useIntl();
// helper functions
let l = message => intl->ReactIntl.Intl.formatMessage(message);
<>
<h1>[%intl "Some header"]->l->React.string</h1>
<p>[%intl "Some body"]->l->React.string</p>
</>
}
You can define your own FormattedMessage
component, which accepts ReactIntl.message
instead of id
and defaultMessage
.
/// FormattedMessage.re
[@react.component]
let make = (~item: ReactIntl.message, ~values: Js.t({..})) =>
<ReactIntl.FormattedMessage id={item.id} defaultMessage={item.defaultMessage} values />;
If you want to make extactor ignore some phrases, you can use intl_draft
/ intl_draft.s
/ intl_draft.el
extensions.
It is helpful if you don't want some draft phrases (likely to change soon) to be sent to translators.
There is an option to generate localized string straight from the ppx (without explicit helper functions usage). This option could be helpful for you if you don't need to change page language without page reloading.
- Ppx supports
intl.s
annotation:
let message: string = [%intl.s "i am message"] // type string
Which will be converted to the:
let message: string = {id: "168c9a2987fad481c5882847ac102aaf", defaultMessage: "i am message"}->ReactIntPpxAdaptor.Message.to_s
- Ppx supports
intl.el
annotation:
let element: React.element = [%intl.el "i am message"]
Which will be converted to the:
let element: React.element = {id: "168c9a2987fad481c5882847ac102aaf", defaultMessage: "i am message"}->ReactIntPpxAdaptor.Message.to_s->React.string
To use this features you have to define ReactIntlPpxAdaptor
in your app (see test folder for details).