Lightweight, dependency-free and well-typed React internationalization library
npm install 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
``sh`
npm install react-hooklation
// or
yarn add react-hooklation
// or
pnpm add react-hooklation
- react: 16.8.0 or later
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.
`javascript`
Within your components you can access translations using useHooklation:
`javascript
const en = {
title: "Welcome",
greeting: { hello: "Hello" },
};
const de = {
title: "Willkommen",
greeting: { hello: "Hallo" },
};
function Component() {
const t = useHooklation({ en, de });
return (
<>
{t("greeting.hello")} Andi
$3
javascript
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 (
- {t("potato", { count: 1 })}
- {t("potato", { count: 3 })}
- {t("potato", { count: 5 })}
);
}
`Which translation is selected?
1. exact match (
or =50)
2. ranged match (>=2 or >=50) that starts closest to count$3
You don't have to import the translations into every single component when using
. 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
typescript
// 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
Development
$3
To build the library, first install the dependencies, then run
.`sh
npm install
npm run build
`$3
sh
npm install
npm test // Unit tests
npm run typecheck // TypeScript tests
``