Skip to content

Type-safe translations generator for i18next.

License

Notifications You must be signed in to change notification settings

reactwaylabs/typed-i18next

Repository files navigation

typed-i18next

Type-safe translations generator for i18next.

NPM version NPM version

Build Status Code coverage

Dependencies Dev dependencies

Features

  • Generates TypeScript declaration file.
  • Check if generated declaration file is up-to-date (useful for CI).
  • Support folder structure: [languageName]/**/[namespace].json.
  • Support file structure: [languageName].json.
  • Combine translations keys from different sources.
  • Strictly typed const { t } = useTranslation() from react-i18next package. Example

Get started

Install typed-i18next package.

$ npm install typed-i18next

Latest dev build is published under canary tag.

$ npm install typed-i18next@canary

To start using the tool:

$ typed-i18next -h

Example

When generating TypeScript types:

$ typed-i18next -i ./src/i18next/translations -o ./src/i18next/translations.d.ts

During CI, declaration file can be checked if they are up-to-date with --check flag:

$ typed-i18next -i ./src/i18next/translations -o ./src/i18next/translations.d.ts --check

CLI Usage

$ typed-i18next -h

Configuration

CLI Flag Type Description Default
-i, --input <path> string Location where translations are located.
-o, --outputFile <file-path> string Location where to generate definitions file.
--check [boolean] boolean Check if generated file up to date (useful for CI). false
--logLevel <level> "silent", "error", "warning", "info", "debug", "trace" Console log level. "info"

Translation file structures

Folder structure

Example translations file structure:

.
└── translations/
    ├── en/
    │   ├── commons.json
    │   ├── validation.json
    │   ├── glosarry.json
    │   └── pages/
    │       ├── login.json
    │       └── register.json
    └── lt/
        ├── commons.json
        ├── validation.json
        ├── glosarry.json
        └── pages/
            ├── login.json
            └── register.json

Library specific types

react-i18next

import { useTranslation } from "react-i18next";
import { StrictTypedTranslations } from "typed-i18next/react";
// Declaration file "translations.d.ts" that we generated with `typed-i18next` tool.
import { Translations } from "./translations";

export const useStrictTranslation = useTranslation as StrictTypedTranslations<typeof useTranslation, Translations>;

License

Released under the MIT license.