-
Notifications
You must be signed in to change notification settings - Fork 77
Localized
Staś Małolepszy edited this page Jun 28, 2017
·
10 revisions
In fluent-react
, localizable elements can be wrapped in the Localized
component:
import { Localized } from 'fluent-react';
<Localized id="hello-world">
<p>Hello, world!</p>
</Localized>
The id
prop should be the unique identifier of the translation. Attributes defined in the translation will be applied to the wrapped element.
type-name
.placeholder = Your name
<Localized id="type-name">
<input
type="text"
placeholder="Your name"
onChange={…}
value={…}
/>
</Localized>
You can also pass arguments to the translation as $
-prefixed props on Localized
:
<Localized id="welcome" $username={name}>
<p>{'Welcome, {$username}'}</p>
</Localized>
It's recommended that the contents of the wrapped component be a string expression. The string will be used as the ultimate fallback if no translation is available. It also makes it easy to grep for strings in the source code. In the future, it may be used for automatic extraction of source copy.
It's also possible to pass React elements as arguments to translations:
<Localized
id="welcome"
$linkA={
<a href="http://example.com/A">A</a>
}
$linkB={
<Localized id="link-to-b">
<a href="http://example.com/B">B</a>
</Localized>
}>
<p>{'Click { $linkA } or { $linkB}.'}</p>
</Localized>