DEV Community

loading...
Cover image for Super small and simple type safe translation library for React

Super small and simple type safe translation library for React

richardlindhout profile image Richard Lindhout ใƒป3 min read

react-ridge-translations ๐Ÿ‡ซ๐Ÿ‡ท ๐Ÿ‡บ๐Ÿ‡ธ ๐Ÿ‡ฌ๐Ÿ‡ง ๐Ÿ‡ช๐Ÿ‡ธ ๐Ÿ‡ฉ๐Ÿ‡ช ๐Ÿ‡ฌ๐Ÿ‡ง ๐Ÿ‡จ๐Ÿ‡ณ ๐Ÿ‡ท๐Ÿ‡บ ๐Ÿ‡ฎ๐Ÿ‡น

Bundle Size npm version npm

Simple ๐Ÿ’ช fast โšก๏ธ and small ๐ŸŽˆ (400 bytes) translation library for React / React Native

Impressions

react-translations

Schermafbeelding 2020-07-03 om 19 26 35
Schermafbeelding 2020-07-03 om 19 52 32
Schermafbeelding 2020-07-03 om 19 52 40

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

Discussion

pic
Editor guide