@alan404/react-localization
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

@alan404/react-localization

A very simple inline React localization library.

Overview

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 (en or tr in this case) - Languages are also customizable.
  • Interpolations use ReactNodes which allow for all sorts of use cases.

Installation & Setup

# Choose from your preferred package manager
pnpm add @alan404/react-localization
npm i @alan404/react-localization
yarn add @alan404/react-localization

After 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 ...;
};

Package Sidebar

Install

npm i @alan404/react-localization

Weekly Downloads

23

Version

0.1.3

License

none

Unpacked Size

32.3 kB

Total Files

22

Last publish

Collaborators

  • alan404