https://github.com/simplymichael/react-intl-tools
A package that provides components to simplify working with react-intl
https://github.com/simplymichael/react-intl-tools
Last synced: 3 months ago
JSON representation
A package that provides components to simplify working with react-intl
- Host: GitHub
- URL: https://github.com/simplymichael/react-intl-tools
- Owner: simplymichael
- License: mit
- Created: 2021-10-17T17:15:59.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-17T21:04:41.000Z (over 3 years ago)
- Last Synced: 2025-02-15T02:06:34.560Z (3 months ago)
- Language: JavaScript
- Size: 310 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Intl Tools
A package that provides components to simplify working with `react-intl`.
Add internationalization and localization capabilities to your React app in 4 simple steps:
- Wrap your main app with the `react-intl-tools`' ``
- Use `react-intl`'s APIs (`formatMessage()`, ``, etc) as you would normally
- Extract and compile your messages with `formatjs`' `extract` and `compile` methods
- Call `react-intl-tools`' `setLocale()` method to update the language
# Table of Contents
- **[Installation](#installation)**
- **[Setup and usage](#setup-and-usage)**
- **[Example setup](#example-setup)**
- **[Using the built-in `LocaleSelector`](#using-the-built-in-localeselector)**
- **[Running the examples](#running-the-examples)**
- **[Contributing](#contributing)**
- **[Report a bug](#report-a-bug)**
- **[Request a new feature](#request-a-new-feature)**
- **[Submit a pull request](#submit-a-pull-request)**
- **Checkout the [Contributing guide](#contributing-guide)**
- **[CHANGELOG](#changelog)**
- **[License](#license)**
- **[Author](#author)**
## Installation
- `npm install react-intl-tools`
## Setup and usage
`react-intl-tools` comes with two main utilities:
- `LocaleContextProvider` is simply a wrapper around `` component.
It takes two props:
- `defaultLocale` a string that specifies the default locale to use
- `translations` an object that contains the available translations
- `LocaleContext` provides a `locale` string and `setLocale(activeLocale)` method
for working with the active (currently selected) locale.
Using `react-intl-tools` is as simple as:
- Wrapping your main app with the `LocaleContextProvider` and
- Calling the `setLocale()` method returned by `LocaleContext` to update (or switch) the locale.
### Example setup
```javascript
// File: app.js
import React from "react"
import { LocaleContext } from "react-intl-tools"
function App() {
const { setLocale } = React.useContext(LocaleContext);
return (
setLocale(e.target.value)}>
Select Language
English
French
German
// Rest of app code goes here
)
}
// File: index.js
import ReactDOM from "react-dom"
import { LocaleContextProvider } from "react-intl-tools"
import App from "./app";
import en from "path/to/translations/en.json"
import fr from "path/to/translations/fr.json"
import de from "path/to/translations/de.json"
const translations = {
en,
fr,
de,
}
ReactDOM.render(
,
document.getElementById("root")
)
```
### Using the built-in `LocaleSelector`
`react-intl-tools` also comes with a `` dropdown component
that you can use in lieu of implementing your own locale switching mechanism.
If your locale switcher is going to be a dropdown (that is, a `` element),
you can use the `LocaleSelector` component instead.
Let's re-write our `app.js` file from the previous example to use the `LocaleSelector` component.
```js
// File: app.js
import React from "react"
import { LocaleSelector } from "react-intl-tools"
const supportedLanguages = [
{ code: "en", name: "English" },
{ code: "fr", name: "French" },
{ code: "de", name: "German" },
];
function App() {
return (
// Rest of app code goes here
)
}
```
## Running the examples
- Run `npm run examples`
- Navigate to *http://localhost:8080*
If you wish to use a different port, use webpack's `--port` option:
`npm run examples -- --port PORT`
## Contributing
- [Report a bug][bug]
- [Request a new feature][fr]
- [Submit a pull request][pr]
## CHANGELOG
See [CHANGELOG][changelog]
## License
[MIT License][license]
## Author
[Simplymichael](https://github.com/simplymichael) ([[email protected]](mailto:[email protected]))
[pr]: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request
[fr]: https://github.com/simplymichael/react-intl-tools/labels/feature%20request
[bug]: https://github.com/simplymichael/react-intl-tools/labels/bug
[license]: https://github.com/simplymichael/react-intl-tools/blob/master/LICENSE.md
[changelog]: https://github.com/simplymichael/react-intl-tools/blob/master/CHANGELOG.md
[contribute]: https://github.com/simplymichael/react-intl-tools/blob/master/CONTRIBUTING.md