React Hooklation

Lightweight, dependency-free and well-typed React internationalization library

This library is in not stable yet and each version might contain a breaking change

Installation

npm install react-hooklation
// or
yarn add react-hooklation
// or
pnpm add react-hooklation

Compatibility

• react: 16.8.0 or later

Usage

Type Documentation

react-hooklation does not detect or mange your current locale. Therefore, you need to provide the current locale at the root of your application: Wrap everything with HooklationProvider and pass the current locale.

<HooklationProvider>...</HooklationProvider>

Within your components you can access translations using useHooklation:

const en = {
  title: "Welcome",
  greeting: { hello: "Hello" },
};
const de = {
  title: "Willkommen",
  greeting: { hello: "Hallo" },
};

function Component() {
  const t = useHooklation({ en, de });

  return (
    <>
      <h1>{t("title")}</h1>
      <p>{t("greeting.hello")} Andi</p>
    </>
  );
}

Plural

const en = {
  potato: {
    "=1": "1 Potato",
    ">=2": "2+ Potatoes",
    ">=5": "Many Potatoes",
  },
};
const de = {
  potato: {
    "=1": "1 Kartoffel",
    ">=2": "2+ Kartoffeln",
    ">=5": "Viele Kartoffeln",
  },
};

function Component() {
  const t = useHooklation({ en, de });

  return (
    <ul>
      <li>{t("potato", { count: 1 })}</li> <!-- 1 potato -->
      <li>{t("potato", { count: 3 })}</li> <!-- 2+ potatoes -->
      <li>{t("potato", { count: 5 })}</li> <!-- Many potatoes -->
    </ul>
  );
}

Which translation is selected?

1. exact match (=2 or =50)
2. ranged match (>=2 or >=50) that starts closest to count

Component-specific hooks

You don't have to import the translations into every single component when using useHooklation. Instead, you can create a component-specific hook using createHooklationHook:

Recommended folder structure

component/
├─ locale/
│  ├─ index.ts
│  ├─ de.ts
│  ├─ en.ts
├─ index.ts
├─ SubComponent.ts

// component/locale/index.ts
import { createHooklationHook } from "react-hooklation";
import { en } from "./en";
import { de } from "./de";

const useLocalTranslation = createHooklationHook({ en, de });

// component/index.ts
import { useLocalTranslation } from "./locale";

const t = useLocalTranslation();

Plugins

• Interpolation
• React

Development

Build

To build the library, first install the dependencies, then run npm run build.

npm install
npm run build

Tests

npm install
npm test          // Unit tests
npm run typecheck // TypeScript tests

License

MIT