Simple 💪 fast ⚡️ and small 🎈 (400 bytes) translation library for React / React Native
Checkout more screenshots here: #2
yarn add react-ridge-translations
or
npm install react-ridge-translations --save
We were frustrated with the API of other libraries and wanted a more type safe alternative for template tags
- React / React Native
- Simple
- Fast
- Very tiny (400 bytes)
- 100% Typesafe
- Hooks
- Use outside React components
// 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;
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>
);
}
import translate from "./translate";
translate.translations.homeScreen.loginButton;
import translate from "./translate";
// global
translate.setOptions({
language: "nl",
fallback: "en",
});
translate.getOptions();
// hook
const { language, fallback } = useOptions();
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;
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;
We want developers to be able to build software faster using modern tools like GraphQL, Golang, React Native.
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