Super small and simple type safe translation library for React

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!

https://github.com/web-ridge/react-ridge-translations