Live Docs

Navigation

Get Started /

stable

Bilingual Setup

Naraya punya dukungan dwibahasa (ID/EN) bawaan lewat LangProvider — pilihan bahasa persisten, plus helper t() untuk teks aplikasi kamu.

Overview

LangProvider (sudah termasuk di AppShell) menyimpan bahasa aktif, mem-persist-nya ke localStorage, dan menyediakan helper t(key) untuk menerjemahkan string. Komponen LangToggle dipakai user untuk berganti bahasa.

1. Sediakan kamus terjemahan

Lewat AppShell — paling ringkas.

import { AppShell } from "@naraya/ui/app-shell";

const translations = {
  id: { greeting: "Selamat datang", save: "Simpan" },
  en: { greeting: "Welcome", save: "Save" },
};

<AppShell defaultLang="id" translations={translations}>
  {children}
</AppShell>

2. Terjemahkan teks dengan t()

t(key, fallback?) mengembalikan string sesuai bahasa aktif.

"use client";
import { useLang } from "@naraya/hooks";

function Hero() {
  const { t } = useLang();
  return <h1>{t("greeting", "Welcome")}</h1>;
}

3. Beri user kontrol ganti bahasa

Pasang LangToggle di topbar, atau panggil setLang /toggle dari useLang secara manual.

import { LangToggle } from "@naraya/ui";

<LangToggle />            // segmented ID | EN
<LangToggle compact />   // satu tombol kode aktif (buat mobile)

useLang() API

PropTypeDefaultDescription
lang"id" | "en"—Bahasa yang sedang aktif.
setLang(lang) => void—Set bahasa secara eksplisit (persist ke localStorage).
toggle() => void—Bolak-balik antara ID dan EN.
t(key, fallback?) => string—Ambil terjemahan; balik ke fallback/key kalau tidak ada.

Langkah Selanjutnya