A very simple inline React localization library.
Here's an example usage:
<Title>
<Localized
en="#AVATAR# Welcome, #USER#"
tr="#AVATAR# Hoşgeldin, #USER#"
jp="#AVATAR# ようこそ, #USER#"
AVATAR={(
<Avatar
src={user.avatarURL}
/>
)}
USER={user.username}
/>
</Title>- Everything is inline. While you are developing, you dont need to open as many files as you have languages to add translations. This makes everything easier. This library is also most likely better for SSR too.
- Translations are type-safe, typescript will show you an error if you're missing a language key (
enortrin this case) - Languages are also customizable. - Interpolations use
ReactNodes which allow for all sorts of use cases.
# Choose from your preferred package manager
pnpm add @alan404/react-localization
npm i @alan404/react-localization
yarn add @alan404/react-localizationAfter installing a package, you need to create a .d.ts file in your project. If you already have one, you can just put this there too. We recommend lang.d.ts.
This is so you can configure the available languages for the entire library:
declare module '@alan404/react-localization/lang' {
export type Lang = "en" | "tr" | "jp";
}The default is "en" with no other language.
After doing that, wrap your app with LanguageProvider
import type { Lang } from "@alan404/react-localization/lang";
import { LanguageProvider } from "@alan404/react-localization";
export const App = () => {
const [language, setLanguage] = useState<Lang>("en"); // Optional
return (
<LanguageProvider
initialLanguage="en"
supportedLanguages={["en", "tr", "jp"]}
{/* These props are optional but allow you to take control of the language state */}
{/* So you can expand upon and save to localStorage or do auto-detection etc */}
language={language}
setLanguage={setLanguage}
>
{/* Other stuff */}
</LanguageProvider>
)
};Now you can use Localized anywhere in your app.
<Localized
{/* translations */}
en="Hello #NAME#"
tr="Merhaba #NAME#"
jp="こんにちは #NAME#"
{/* interpolations */}
NAME={"Gökçe"}
/>
// Interpolation keys dont need to be all-uppercase, but language codes are lowercase so we recommend you keep them uppercase too.There's also a useLanguage hook.
const Something = () => {
const {
language,
setLanguage,
supportedLanguages,
} = useLanguage();
return ...;
};