Miss any of our Open RFC calls?Watch the recordings here! »

react-ridge-translations

1.0.0 • Public • Published

react-ridge-translations 🇫🇷 🇺🇸 🇬🇧 🇪🇸 🇩🇪 🇬🇧 🇨🇳 🇷🇺 🇮🇹

Bundle Size npm version npm

Simple 💪 fast ⚡️ and small 🎈 (400 bytes) translation library for React / React Native

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

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

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang, React Native without depending on commercial providers like Firebase or AWS Amplify.

Checkout our other products too! 👌 https://github.com/web-ridge

Keywords

none

Install

npm i react-ridge-translations

DownloadsWeekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

10.4 kB

Total Files

11

Last publish

Collaborators

  • avatar