1.0.15 • Published 4 years ago
context-multi-language v1.0.15
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.