API Reference

Complete API reference for the Remix & Hydrogen SDK.

Architecture

@better-i18n/remix is a thin wrapper around @better-i18n/core that adds:

• Request-based locale detection via Accept-Language header parsing
• Singleton pattern with TtlCache for efficient CDN fetching across requests
• Server-side translation loading — translations are loaded server-side and passed as loader data, with optional react-i18next integration for useTranslation() hooks

createRemixI18n

The main entry point. Creates a singleton i18n instance for server-side use.

import { createRemixI18n } from "@better-i18n/remix";

const i18n = createRemixI18n({
  project: "my-company/web-app",
  defaultLocale: "en",
});

RemixI18n Interface

Utility Functions

Types

msg()

String extractor for non-hook contexts — meta() functions, loaders, and utility modules where React hooks cannot be called. For component translations, use useTranslation() (i18next) or useTranslations() (use-intl) instead.

import { msg } from "@better-i18n/remix";

const common = messages.common;
msg(common, "welcome", "Welcome"); // → "Hoş geldiniz" or "Welcome"
msg(common, "missing_key");        // → ""
msg(undefined, "key", "fallback"); // → "fallback"

Returns: string — The translation value, or fallback

React Entrypoint (@better-i18n/remix/react)

Optional entrypoint for projects that want a use-intl-based React provider instead of i18next. Provides a RemixI18nProvider, translation hooks, and a built-in LanguageSwitcher component.

i18next Entrypoint (@better-i18n/remix/i18next)

Optional entrypoint for projects using i18next / react-i18next. Converts CDN translations to i18next resource format.