@nckdv/translation-react

Framework-neutral React bindings for nck-translation. The package turns already-loaded catalogs into a provider and hooks; it never fetches catalogs or reads credentials.

Install

npm install @nckdv/translation-react

React 18.2 and React 19 are supported peer dependencies.

Use

import {
  TranslationProvider,
  useLanguage,
  useTranslations,
} from "@nckdv/translation-react";

function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TranslationProvider
      language="de"
      catalog={{ "home.title": "Willkommen" }}
      fallback={{ "buttons.save": "Save" }}
    >
      {children}
    </TranslationProvider>
  );
}

function Heading() {
  const t = useTranslations();
  const language = useLanguage();
  return <h1 lang={language}>{t("home.title")}</h1>;
}

Missing active-language entries fall back to fallback; a key absent from both catalogs renders as itself. Calling either hook outside TranslationProvider throws an error naming the missing provider.

The package starts with "use client", so it can be imported directly by a Next.js Client Component. In a Next.js application, load catalogs on the server with @nckdv/translation-nextjs and pass only the plain catalog into this provider. Never send the project API key to the browser.

API

| export | signature | | --- | --- | | TranslationProvider | { language, catalog, fallback?, children } | | useTranslations | () => TranslateFn | | useLanguage | () => string |

The package also re-exports TranslationMap, TranslateFn and InterpolationValues from @nckdv/translation-core.