Integrasi React: Dokumentasi Hook useDictionary

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

Mengimpor useDictionary di React

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

• Komponen Klien:

  typescript

  Salin konten

  Salin kode

  Salin kode ke clipboard

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

• Komponen Server:

  typescript

  Salin konten

  Salin kode

  Salin kode ke clipboard

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

Parameter

Hook ini menerima dua parameter:

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

Kamus

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

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

const exampleContent = {
  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 exampleContent;

Contoh Penggunaan di Komponen Client React

Di bawah ini adalah contoh cara menggunakan hook useDictionary dalam sebuah komponen React:

"use client";

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

const ClientComponentExample: FC = () => {
  const { title, content } = useDictionary(clientComponentExampleContent);

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

Contoh Penggunaan di React Server Component

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

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

const ServerComponentExample: FC = () => {
  const { content } = useDictionary(clientComponentExampleContent);

  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 seperti yang dideklarasikan 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, menyediakan pendekatan yang efisien untuk mengelola konten yang dilokalisasi tanpa bergantung pada fungsi editor visual.