Integrasi React: Dokumentasi Hook useI18n

Bagian ini memberikan panduan rinci tentang cara menggunakan hook useI18n dalam aplikasi React, memungkinkan lokalisasi konten yang efisien.

Mengimpor useI18n di React

Hook useI18n dapat diimpor dan diintegrasikan ke dalam aplikasi React sesuai dengan konteks sebagai berikut:

• Komponen Klien:

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

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

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

• Komponen Server:

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

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

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

Parameter

Hook ini menerima dua parameter:

1. namespace: Namespace kamus untuk membatasi ruang lingkup kunci terjemahan.
2. locale (opsional): Locale yang diinginkan. Jika tidak ditentukan, locale dari konteks akan digunakan sebagai default.

Kamus

Semua kunci kamus harus dideklarasikan dalam file deklarasi konten untuk meningkatkan keamanan tipe dan mencegah kesalahan. Instruksi konfigurasi dapat ditemukan di sini.

Contoh Penggunaan dalam React

Contoh penggunaan hook useI18n dalam komponen React:

import type { FC } from "react";
import { ClientComponentExample, ServerComponentExample } from "@components";
import { IntlayerProvider } from "react-intlayer";
import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
import { Locales } from "intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const t = useI18n("home-page", locale);

  return (
    <>
      <p>{t("introduction")}</p>
      <IntlayerProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

import type { FC } from "react";
import { useI18n } from "react-intlayer";

const ComponentExample: FC = () => {
  const t = useI18n("component-example");

  return (
    <div>
      <h1>{t("title")}</h1> {/* Tampilkan judul */}
      <p>{t("description")}</p> {/* Tampilkan deskripsi */}
    </div>
  );
};

jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
import { useI18n } from "react.intlayer/server";

const ServerComponentExample = () => {
  const t = useI18n("server-component");

  return (
    <div>
      <h1>{t("title")}</h1> {/* Tampilkan judul */}
      <p>{t("description")}</p> {/* Tampilkan deskripsi */}
    </div>
  );
};

Penanganan Atribut

Saat melokalisasi atribut, akses nilai terjemahan dengan tepat:

<!-- Untuk atribut aksesibilitas (misalnya, aria-label), gunakan .value karena diperlukan string murni -->
<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Sumber Daya Tambahan

• Intlayer Visual Editor: Untuk pengalaman manajemen konten yang lebih intuitif, lihat dokumentasi editor visual di sini.

Bagian ini secara khusus membahas integrasi hook useI18n dalam aplikasi React, yang menyederhanakan proses lokalisasi dan memastikan konsistensi konten di berbagai locale.