dimah-s3v1.5.11

Internationalization

Localize React UI strings with a partial translation map.

English needs no setup. To localize the React client, define a partial translation map and pass it to the provider.

lib/translations-fa.ts
import type { Translations } from "@dimah-s3/react";

export const fa = {
  "Upload failed(toast)": "آپلود ناموفق بود",
  "Cancel(dialog button)": "لغو",
} satisfies Partial<Translations>; 
lib/s3-client.ts
"use client";

import { createS3Client } from "@dimah-s3/react";

export const s3Client = createS3Client();
export const S3Provider = s3Client.Provider;
app/layout.tsx
import { S3Provider } from "@/lib/s3-client";
import { fa } from "@/lib/translations-fa"; 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fa" dir="rtl">
      <body>
        <S3Provider translations={fa}>{children}</S3Provider>
      </body>
    </html>
  );
}

Vite and other client-only apps can pass translations to <s3Client.Provider> instead.

Missing keys stay English.

API errors

The server always responds in English. @dimah-s3/ui localizes errors with the same translations map. Headless hooks expose the original APIError; pass it to useFormatDimahError before rendering a localized message.

On this page