# ignite-intl

> An ignite plugin to add localization/translations to your app

Latest version **0.0.5** (published 2019-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ignite-intl
pnpm add ignite-intl
yarn add ignite-intl
bun add ignite-intl
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2019-12-09 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adrien THIERY |
| Maintainers | adrienthiery |
| Keywords | intl, localization, translation, ignite, react-native |

## Links

- npm: https://www.npmjs.com/package/ignite-intl
- Repository: https://github.com/osedea/ignite-intl
- Homepage: https://github.com/osedea/ignite-intl#readme
- Issues: https://github.com/osedea/ignite-intl/issues
- npm.io page: https://npm.io/package/ignite-intl

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2019-12-09
- 0.0.4 — 2019-11-15
- 0.0.3 — 2019-11-15
- 0.0.2 — 2019-11-14

## README

# Ignite Intl plugin

This plugin will setup your application for internationalization using:
* https://github.com/react-native-community/react-native-localize : To get data on the locales of the user that are defined in the OS settings
* https://github.com/formatjs/react-intl : To handle the actual management of translated strings

## Add plugin

```sh
ignite add intl
```

## Remove plugin

```sh
ignite remove intl
```

## How yo use in your app

At `/`OSEDEA, we like simple, working solutions.

And when I say simple, I mean simple to *USE*. This setup is not super simple, but it provides a very simple, homogeneous way to add translations after: the `translate` method.

To your top component (i.e. the one you plug into `AppRegistry.registerComponent`), add the following changes (`./i18n` being the file generated by the plugin if you add the translation files, or the `templates/index.js` file of this repo):

```diff
import React, { Component } from 'react';
+ import * as RNLocalize from 'react-native-localize';
+ import { RawIntlProvider } from 'react-intl';
+ import { loadLocale, translate, registerLanguageListener, unregisterLanguageListener, intl, changeLanguage, currentLocale, getLocale } from './i18n';

class Root extends Component {
+    state = { locale: currentLocale };

+    componentDidMount() {
+        // Listen to changes made on the phone
+        RNLocalize.addEventListener('change', getLocale);
+        // setState if `changeLanguage` is called from anywhere in the app
+        registerLanguageListener(this.handleLocalizationChange);
+        // Loads the locale last saved in AsyncStorage
+        loadLocale().then((lang) => lang && changeLanguage(lang));
+    }

+    componentWillUnmount() {
+        // Cleanup
+        RNLocalize.removeEventListener('change', getLocale);
+        unregisterLanguageListener(this.handleLocalizationChange);
+    }

+    handleLocalizationChange = (locale: string) => {
+        this.setState({ locale });
+    };

    render() {
        return (
+            <RawIntlProvider value={intl}>
-            <App />
+                <App />
+            </RawIntlProvider>
        );
    }
}

export default Root;
```

In any other component:

```diff
import React, { Component } from 'react';
import { View, Text } from 'react-native';
+ import { translate } from '../i18n';

class SomeComponent extends Component {
    render() {
        return (
            <View>
-               <Text>Hey, how are you?</Text>
+               <Text>{translate({ id: 'hello' })}</Text>
            </View>
        );
    }
}

export default SomeComponent;
```

If you are using [react-navigation](https://github.com/react-navigation/react-navigation), follow [this guide](https://reactnavigation.org/docs/en/localization.html#wiring-up-your-localization-library-to-navigation) to setup your Tabs labels, etc.

## Compatibility 

This has been tested with React Native [0.61.4](https://github.com/facebook/react-native/releases/tag/v0.61.4).

## Contributing

Please open an issue for any compatibility issues, or provide better interactivity/compatibility through opening a PR! 🙂

---
_Source: https://npm.io/package/ignite-intl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._