react-ridge-translations ๐ซ๐ท ๐บ๐ธ ๐ฌ๐ง ๐ช๐ธ ๐ฉ๐ช ๐ฌ๐ง ๐จ๐ณ ๐ท๐บ ๐ฎ๐น
Simple ๐ช fast โก๏ธ and small ๐ (400 bytes) translation library for React / React Native
Impressions
Github Repository
https://github.com/web-ridge/react-ridge-translations
Install
yarn add react-ridge-translations
or
npm install react-ridge-translations --save
Why another translation library ๐ค
We were frustrated with the API of other libraries and wanted a more type safe alternative for template tags
Features ๐คนโโ๏ธ
- React / React Native
- Simple
- Fast
- Very tiny (400 bytes)
- 100% Typesafe
- Hooks
- Use outside React components
Getting started ๐ ๐
// translate.ts
import { createTranslations } from 'react-ridge-translations'
// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
nl: string
fr: string
be: string
}
// create a translation object with your translations
const translate = createTranslations<TranslationLanguages>()({
homeScreen:{
signIn: {
nl: 'yes',
fr: 'yes',
be: 'yes',
},
welcomeText: ({ firstName }: { firstName: string }) => ({
nl: `Hoi ${firstName}`,
fr: `Hello ${firstName}`,
be: `Hello ${firstName}`,
}),
}
}, {
language: 'nl',
fallback: 'en',
})
export default translate
Usage in React / React Native components
import translate from './translate'
export default function HomeScreen() {
// use is a hook which will update automatically if language change :)
const ht = translate.use().homeScreen
return (
<div>
{ht.welcomeText({ firstName: 'Richard' })}
{ht.signIn}
</div>
)
}
Usage outside components / Class components
import translate from './translate'
translate.translations.homeScreen.loginButton
Changing language
import translate from './translate'
translate.setOptions({
language: 'nl',
fallback: 'en',
})
Detect user language
React Native
import { NativeModules, Platform } from 'react-native';
import { createTranslations } from 'react-ridge-translations'
// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
nl: string
fr: string
en: string
}
const deviceLanguage = (Platform.OS === 'ios'
? NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13
: NativeModules.I18nManager.localeIdentifier) || '';;
const availableLanguages: (keyof TranslationLanguages)[] = ['nl', 'en', 'fr'] ;
const fallback = 'en'
function getBestLanguage(): typeof availableLanguages[number] | typeof fallback {
return availableLanguages.find(al => deviceLanguage.startsWith(al)) || fallback
}
const translate = createTranslations<TranslationLanguages>()({
// ........translations
}, {
language: getBestLanguage(),
fallback,
})
export default translate
React
import { createTranslations } from 'react-ridge-translations'
// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
nl: string
fr: string
en: string
}
const deviceLanguage = navigator.language;
const availableLanguages: (keyof TranslationLanguages)[] = ['nl', 'en', 'fr'] ;
const fallback = 'en'
function getBestLanguage(): typeof availableLanguages[number] | typeof fallback {
return availableLanguages.find(al => deviceLanguage.startsWith(al)) || fallback
}
const translate = createTranslations<TranslationLanguages>()({
// ........translations
}, {
language: getBestLanguage(),
fallback,
})
export default translate
Related
Checkout our other products too! ๐ https://github.com/web-ridge
Easy global state management in React / React Native -> https://github.com/web-ridge/react-ridge-state
Feedback
If you have feedback / questions / issues feel free to make an issue or a comment!
Top comments (0)