Integrasi React: Dokumentasi Hook useDictionary

Bagian ini memberikan panduan terperinci tentang penggunaan hook useDictionary dalam aplikasi React, memungkinkan penanganan konten lokal yang efisien tanpa editor visual.

Mengimpor useDictionary dalam React

Hook useDictionary dapat diintegrasikan ke dalam aplikasi React dengan mengimpornya berdasarkan konteks:

• Komponen Klien:

  import { useDictionary } from "react-intlayer"; // Digunakan dalam komponen React sisi klien

  import { useDictionary } from "react-intlayer"; // Digunakan dalam komponen React sisi klien

  const { useDictionary } = require("react-intlayer"); // Digunakan dalam komponen React sisi klien

• Komponen Server:

  import { useDictionary } from "react-intlayer/server"; // Digunakan dalam komponen React sisi server

  import { useDictionary } from "react-intlayer/server"; // Digunakan dalam komponen React sisi server

  const { useDictionary } = require("react-intlayer/server"); // Digunakan dalam komponen React sisi server

Parameter

Hook ini menerima dua parameter:

1. dictionary: Objek kamus yang dideklarasikan berisi konten yang dilokalisasi untuk kunci tertentu.
2. locale (opsional): Locale yang diinginkan. Defaultnya adalah locale konteks saat ini jika tidak ditentukan.

Kamus

Semua objek kamus harus dideklarasikan dalam file konten terstruktur untuk memastikan keamanan tipe dan mencegah kesalahan runtime. Anda dapat menemukan instruksi pengaturan di sini. Berikut adalah contoh deklarasi konten:

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-example",
  content: {
    title: t({
      en: "Client Component Example",
      fr: "Exemple de composant client",
      es: "Ejemplo de componente cliente",
    }),
    content: t({
      en: "This is the content of a client component example",
      fr: "Ceci est le contenu d'un exemple de composant client",
      es: "Este es el contenido de un ejemplo de componente cliente",
    }),
  },
} satisfies Dictionary;

export default componentContent;

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "component-example",
  "content": {
    "title": {
      "nodeType": "translation",
      "translation": {
        "en": "Client Component Example",
        "fr": "Exemple de composant client",
        "es": "Ejemplo de componente cliente",
        "id": "Contoh Komponen Klien"
      }
    },
    "content": {
      "nodeType": "translation",
      "translation": {
        "en": "This is the content of a client component example",
        "fr": "Ceci est le contenu d'un exemple de composant client",
        "es": "Este es el contenido de un ejemplo de componente cliente",
        "id": "Ini adalah konten dari contoh komponen klien"
      }
    }
  }
}

Contoh Penggunaan di React

Berikut adalah contoh cara menggunakan hook useDictionary dalam sebuah komponen React:

import type { FC } from "react";
import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

const ComponentExample: FC = () => {
  const { title, content } = useDictionary(componentContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

Integrasi Server

Jika Anda menggunakan hook useDictionary di luar IntlayerProvider, locale harus secara eksplisit diberikan sebagai parameter saat merender komponen:

import type { FC } from "react";
import { useDictionary } from "react-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
  const { content } = useDictionary(clientComponentExampleContent, locale);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};

Catatan tentang Atribut

Berbeda dengan integrasi yang menggunakan editor visual, atribut seperti buttonTitle.value tidak berlaku di sini. Sebagai gantinya, akses langsung string yang sudah dilokalisasi sesuai dengan deklarasi dalam konten Anda.

<button title={content.title}>{content.content}</button>

Tips Tambahan

• Keamanan Tipe: Selalu gunakan Dictionary untuk mendefinisikan kamus Anda agar memastikan keamanan tipe.
• Pembaruan Lokalisasi: Saat memperbarui konten, pastikan semua locale konsisten untuk menghindari terjemahan yang hilang.

Dokumentasi ini berfokus pada integrasi hook useDictionary, memberikan pendekatan yang lebih sederhana untuk mengelola konten yang dilokalisasi tanpa bergantung pada fungsi editor visual.