Fluent bindings for React
npm install @artkravchenko/fluent-react@fluent/react provides React bindings for Project Fluent, a localization
framework designed to unleash the expressive power of the natural language.
@fluent/react can be used both on the client-side and the server-side. You
can install it from the npm registry or use it as a standalone script (as theFluentReact global).
npm install @fluent/react
@fluent/react takes advantage of React's Components system and the virtual
DOM. Translations are exposed to components via the _provider_ pattern.
There are many approaches to fetching and storing translations. To allow
maximum flexibility, @fluent/react expects the developer to write a little
bit of a setup code related to language negotiation and translation fetching.
It makes @fluent/react unopinionated and suitable for many different
scenarios. You will likely also need to install a few other packages:@fluent/bundle, @fluent/langneg and intl-pluralrules.
Consult the [wiki][] for documentation on how to set up and use@fluent/react.
[wiki]: https://github.com/projectfluent/fluent.js/wiki/React-Bindings
The API reference is available at https://projectfluent.org/fluent.js/react.
For legacy browsers, the compat build has been transpiled using Babel's [env
preset][]:
``javascript`
import "@fluent/react/compat";
In some cases, using the compat build may be needed even if you targetcreate-react-app
modern browsers. For instance, the [ boilerplate usescompat
UglifyJS to minify its files][create-react-app-minify]. As of November 2017,
UglifyJS doesn't support some of the new JavaScript syntax features. By using
the build of all @fluent` packages you can ensure that the
minifiction works properly.
[create-react-app-minify]: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Find out more about Project Fluent at [projectfluent.org][], including
documentation of the Fluent file format ([FTL][]), links to other packages and
implementations, and information about how to get involved.
[env preset]: https://babeljs.io/docs/plugins/preset-env/
[projectfluent.org]: https://projectfluent.org
[FTL]: https://projectfluent.org/fluent/guide/