@haykal/i18n-client

React Query hooks for internationalization — fetch locales, translations, and manage translation entries.

Installation

pnpm add @haykal/i18n-client

Setup

import { initMutator } from '@haykal/i18n-client';

initMutator(); // Connects to HaykalClient singleton

Hooks

Public (i18n)

| Hook | Description | | ---------------------------- | ----------------------------------------- | | useLocales() | List available locales | | useTranslations() | Get translations for a locale | | useNamespaceTranslations() | Get translations for a locale + namespace |

Admin (i18n-admin)

| Hook | Description | | -------------------------- | ----------------------------- | | useCreateTranslation() | Create a translation entry | | useUpdateTranslation() | Update a translation entry | | useDeleteTranslation() | Delete a translation entry | | useMissingTranslations() | Find missing translation keys | | useExportTranslations() | Export translations | | useImportTranslations() | Import translations |

Imperative Functions

| Function | Description | | ---------------------------- | ------------------------------------------ | | getLocales() | Fetch locales outside React | | getTranslations() | Fetch translations outside React | | getNamespaceTranslations() | Fetch namespace translations outside React |

Usage Examples

Loading Translations

import { useTranslations } from '@haykal/i18n-client';

function TranslatedPage() {
  const { data, isLoading } = useTranslations({ locale: 'en' });

  if (isLoading) return <div>Loading...</div>;

  return <h1>{data?.data?.['welcome.title']}</h1>;
}

Managing Translations (Admin)

import {
  useCreateTranslation,
  useMissingTranslations,
} from '@haykal/i18n-client';

function TranslationAdmin() {
  const { data: missing } = useMissingTranslations();
  const { mutate: create } = useCreateTranslation();

  return (
    <div>
      <h2>Missing Keys: {missing?.data?.length}</h2>
      <button
        onClick={() => create({ key: 'new.key', locale: 'en', value: 'Hello' })}
      >
        Add Translation
      </button>
    </div>
  );
}

Regenerating

nx run @haykal/i18n-client:generate

Never edit files in src/generated/ — they are auto-generated by Orval.

Related Packages

• @haykal/i18n-backend — Backend API
• @haykal/core-client — HTTP client and React Query provider

Further Reading

• Client SDK Generation — Orval pipeline and regeneration
• API Reference — Backend endpoints these hooks call