context-multi-language

This library is for providing Multi Language System for React and React Native Applications.

Installation

yarn add context-multi-language

npm install context-multi-language

Usage

Add SKIP_PREFLIGHT_CHECK=true to an .env file in your project if you get eslint error.

TranslationsProvider

<TranslationsProvider
  remoteTranslationsUrl={remoteTranslationsUrl}
  defaultLocale="tr"
/>

| Prop | Type | Default | Description | | --------------------- | ------ | ------------------ | ---------------------------------------------- | | translations | object | undefined | translations data | | remoteTranslationsUrl | string | undefined | fetch translations data from a remote endpoint | | defaultLocale | string | tr | default language | | errorComponent | FC | TranslationsError | default error component. | | loadingComponent | FC | TranslationLoading | default loading component. | | children | FC | | TranslationsProvider's children. |

useTranslations

const { t, changeLanguage, languages } = useTranslations();

| Prop | Type | Description | | -------------- | -------- | ---------------------------- | | t | object | provide translations data. | | changeLanguage | function | change current language. | | languages | array | existing languages. |

Samples

import { TranslationsProvider, useTranslations } from 'context-multi-language';

const remoteTranslationsUrl = 'https://raw.githubusercontent.com/burhanyilmaz/translations/master/locales.json';

export default () => (
    <TranslationsProvider remoteTranslationsUrl={remoteTranslationsUrl} defaultLocale='tr'>
      <HomeScreen />
    </TranslationsProvider>
);

// or

const translations = {
  "languages": ["en"],
  "translations": {
    "en": {
      "password": "Password",
      "phoneNumber": "Phone Number",
      "signIn": "Sign in!"
    },
}

export default () => (
    <TranslationsProvider translations={translations} defaultLocale='tr'>
      <HomeScreen />
    </TranslationsProvider>
);

const HomeScreen = () => {
  const { t, changeLanguage, languages } = useTranslations();

  return (
    <SafeAreaView style={styles.fill}>
      <StatusBar barStyle="light-content" />
      <Input label={t.phoneNumber} />
      <Space />
      <Input label={t.password} secureTextEntry />
      <Space />
      <Button size="large">{t.singIn}</Button>
      <Space />
      <ButtonGroup>
        {languages.map((language) => (
          <Button
            key={language}
            size="tiny"
            onPress={() => changeLanguage(language)}
          >
            {language}
          </Button>
        ))}
      </ButtonGroup>
    </SafeAreaView>
  );
};

SS

React Native Mobile

React Web

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT