@intlayer/docs 7.0.6 → 7.0.8-canary.0

package/docs/id/packages/react-intlayer/useLocale.md

@@ -0,0 +1,210 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Dokumentasi Hook useLocale | react-intlayer
+description: Lihat cara menggunakan hook useLocale untuk paket react-intlayer
+keywords:
+  - useLocale
+  - dictionary
+  - key
+  - Intlayer
+  - Internasionalisasi
+  - Dokumentasi
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useLocale
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Integrasi React: Dokumentasi Hook `useLocale`
+
+Bagian ini menyediakan detail lengkap tentang hook `useLocale` dari pustaka `react-intlayer`, yang dirancang untuk menangani manajemen locale dalam aplikasi React.
+
+## Mengimpor `useLocale` di React
+
+Untuk mengintegrasikan hook `useLocale` ke dalam aplikasi React Anda, impor dari paket yang sesuai:
+
+```typescript codeFormat="typescript"
+import { useLocale } from "react-intlayer"; // Digunakan dalam komponen React untuk manajemen locale
+```
+
+```javascript codeFormat="esm"
+import { useLocale } from "react-intlayer"; // Digunakan dalam komponen React untuk manajemen locale
+```
+
+```javascript codeFormat="commonjs"
+const { useLocale } = require("react-intlayer"); // Digunakan dalam komponen React untuk manajemen locale
+```
+
+## Ikhtisar
+
+Hook `useLocale` menawarkan cara mudah untuk mengakses dan memanipulasi pengaturan locale di dalam komponen React. Ini menyediakan akses ke locale saat ini, locale default, semua locale yang tersedia, dan fungsi untuk memperbarui pengaturan locale.
+
+## Penggunaan
+
+Berikut cara menggunakan hook `useLocale` dalam sebuah komponen React:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Locale Saat Ini: {locale}</h1>
+      <p>Locale Default: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Locale Saat Ini: {locale}</h1>
+      <p>Locale Default: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Locale Saat Ini: {locale}</h1>
+      <p>Locale Default: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+## Parameter dan Nilai Kembali
+
+Saat Anda memanggil hook `useLocale`, hook ini mengembalikan sebuah objek yang berisi properti-properti berikut:
+
+- **`locale`**: Locale saat ini yang diatur dalam konteks React.
+- **`defaultLocale`**: Locale utama yang didefinisikan dalam konfigurasi.
+- **`availableLocales`**: Daftar semua locale yang tersedia sesuai dengan definisi dalam konfigurasi.
+- **`setLocale`**: Fungsi untuk memperbarui locale saat ini dalam konteks aplikasi.
+
+## Contoh
+
+Contoh ini menunjukkan sebuah komponen yang menggunakan hook `useLocale` untuk menampilkan pemilih locale, memungkinkan pengguna untuk mengubah locale aplikasi secara dinamis:
+
+```tsx fileName="src/components/LocaleSelector.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## Kesimpulan
+
+Hook `useLocale` dari `react-intlayer` adalah alat penting untuk mengelola locale dalam aplikasi React Anda, menyediakan fungsionalitas yang dibutuhkan untuk menyesuaikan aplikasi Anda dengan berbagai audiens internasional secara efektif.

package/docs/id/per_locale_file.md

@@ -0,0 +1,323 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-06-29
+title: Deklarasi Konten `Per-Locale` di Intlayer
+description: Temukan cara mendeklarasikan konten per locale di Intlayer. Ikuti dokumentasi untuk memahami berbagai format dan kasus penggunaan.
+keywords:
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Per-Locale
+  - TypeScript
+  - JavaScript
+slugs:
+  - doc
+  - concept
+  - per-locale-file
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Deklarasi Konten `Per-Locale` di Intlayer
+
+Intlayer mendukung dua cara untuk mendeklarasikan konten multibahasa:
+
+- Satu file dengan semua terjemahan
+- Satu file per locale (format per-locale)
+
+Fleksibilitas ini memungkinkan:
+
+- Migrasi mudah dari alat i18n lainnya
+- Dukungan untuk alur kerja terjemahan otomatis
+- Organisasi terjemahan yang jelas ke dalam file terpisah berdasarkan locale
+
+## Satu File dengan Banyak Terjemahan
+
+Format ini ideal untuk:
+
+- Iterasi cepat dalam kode.
+- Integrasi mulus dengan CMS.
+
+Ini adalah pendekatan yang direkomendasikan untuk sebagian besar kasus penggunaan. Format ini memusatkan terjemahan, sehingga memudahkan iterasi dan integrasi dengan CMS.
+
+```tsx fileName="hello-world.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// kontenHelloWorld berisi terjemahan multibahasa untuk komponen
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+};
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.content.cjs" contentDeclarationFormat="json"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// kontenHelloWorld berisi terjemahan multibahasa untuk komponen
+const helloWorldContent = {
+  key: "hello-world",
+  content: {
+    multilingualContent: t({
+      en: "Title of my component",
+      es: "Título de mi componente",
+    }),
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```json fileName="hello-world.content.ts" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "content": {
+    "multilingualContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Title of my component",
+        "es": "Título de mi componente"
+      }
+    }
+  }
+}
+```
+
+> Direkomendasikan: Format ini paling baik digunakan saat memakai editor visual Intlayer atau mengelola terjemahan langsung di dalam kode.
+
+## Format Per-Locale
+
+Format ini berguna ketika:
+
+- Anda ingin melakukan versioning atau menimpa terjemahan secara independen.
+- Anda mengintegrasikan alur kerja terjemahan mesin atau manusia.
+
+Anda juga dapat memisahkan terjemahan ke dalam file locale individual dengan menentukan field locale:
+
+```tsx fileName="hello-world.en.content.ts" contentDeclarationFormat="typescript"
+import { t, Locales, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Penting
+  content: { multilingualContent: "Title of my component" },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.ts" contentDeclarationFormat="typescript"
+import { t, Locales, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Penting
+  content: { multilingualContent: "Título de mi componente" },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.en.content.mjs" contentDeclarationFormat="esm"
+import { t, Locales } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Kamus konten untuk "hello-world"
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Penting
+  content: { multilingualContent: "Title of my component" },
+};
+
+export default helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
+import { t, Locales } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Kamus konten untuk "hello-world"
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Penting
+  content: { multilingualContent: "Título de mi componente" },
+};
+
+export default helloWorldContent;
+```
+
+```js fileName="hello-world.en.content.cjs" contentDeclarationFormat="commonjs"
+const { t, Locales } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH, // Penting
+  content: {
+    multilingualContent: "Title of my component",
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```tsx fileName="hello-world.es.content.cjs" contentDeclarationFormat="commonjs"
+const { t, Locales } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.SPANISH, // Penting
+  content: {
+    multilingualContent: "Título de mi componente",
+  },
+};
+
+module.exports = helloWorldContent;
+```
+
+```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "locale": "en", // Penting
+  "content": {
+    "multilingualContent": "Judul komponen saya",
+  },
+}
+```
+
+```json5 fileName="hello-world.es.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "locale": "es", // Penting
+  "content": {
+    "multilingualContent": "Título de mi componente",
+  },
+}
+```
+
+> Penting: Pastikan field locale didefinisikan. Ini memberitahu Intlayer bahasa apa yang diwakili oleh file tersebut.
+
+> Catatan: Dalam kedua kasus, file deklarasi konten harus mengikuti pola penamaan `*.content.{ts,tsx,js,jsx,mjs,cjs,json}` agar dikenali oleh Intlayer. Sufiks `.[locale]` bersifat opsional dan hanya digunakan sebagai konvensi penamaan.
+
+## Menggabungkan Format
+
+Anda dapat menggabungkan kedua pendekatan deklarasi untuk kunci konten yang sama. Sebagai contoh:
+
+- Deklarasikan konten dasar Anda secara statis dalam file seperti index.content.ts.
+- Tambahkan atau timpa terjemahan spesifik dalam file terpisah seperti index.fr.content.ts atau index.content.json.
+
+Pengaturan ini sangat berguna ketika:
+
+- Anda ingin mendefinisikan struktur konten awal dalam kode.
+- Anda berencana untuk memperkaya atau melengkapi terjemahan nanti menggunakan CMS atau alat otomatis.
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        ├── index.content.json
+        └── index.ts
+```
+
+### Contoh
+
+Berikut adalah file deklarasi konten multibahasa:
+
+```tsx fileName="Components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const helloWorldContent = {
+  key: "hello-world",
+  locale: Locales.ENGLISH,
+  content: {
+    multilingualContent: "Judul komponen saya",
+    projectName: "Proyek saya",
+  },
+} satisfies Dictionary;
+
+export default helloWorldContent;
+```
+
+```json fileName="Components/MyComponent/index.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "hello-world",
+  "content": {
+    "multilingualContent": {
+      "nodeType": "translation",
+      "translation": {
+        "fr": "Titre de mon composant",
+        "es": "Título de mi componente"
+      }
+    }
+  }
+}
+```
+
+Intlayer menggabungkan file multibahasa dan per-locale secara otomatis.
+
+```tsx fileName="Components/MyComponent/index.ts"
+import { getIntlayer, Locales } from "intlayer";
+
+const intlayer = getIntlayer("hello-world"); // Default locale adalah ENGLISH, jadi ini akan mengembalikan konten dalam bahasa ENGLISH
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Hasil:
+// {
+//  "multilingualContent": "Judul komponen saya",
+//  "projectName": "Proyek saya"
+// }
+
+const intlayer = getIntlayer("hello-world", Locales.SPANISH);
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Hasil:
+// {
+//  "multilingualContent": "Título de mi componente",
+//  "projectName": "Proyek saya"
+// }
+
+const intlayer = getIntlayer("hello-world", Locales.FRENCH);
+
+console.log(JSON.stringify(intlayer, null, 2));
+// Hasil:
+// {
+//  "multilingualContent": "Titre de mon composant",
+//  "projectName": "Proyek saya"
+// }
+```
+
+### Pembuatan Terjemahan Otomatis
+
+Gunakan [intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md) untuk mengisi otomatis terjemahan yang hilang berdasarkan layanan yang Anda pilih.