Integrasi React: Dokumentasi Hook useIntlayer

Bagian ini memberikan panduan rinci tentang penggunaan hook useIntlayer dalam aplikasi React, memungkinkan lokalisasi konten yang efisien.

Mengimpor useIntlayer di React

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

• Komponen Klien:

  typescript

  Salin konten

  Salin kode

  Salin kode ke clipboard

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

• Komponen Server:

Parameter

Hook ini menerima dua parameter:

1. key: Kunci kamus untuk mengambil konten yang sudah dilokalkan.
2. locale (opsional): Locale yang diinginkan. Default-nya adalah locale dari konteks jika tidak ditentukan.

Kamus

Semua kunci kamus harus dideklarasikan dalam file deklarasi konten untuk meningkatkan keamanan tipe dan menghindari kesalahan. Anda dapat menemukan instruksi pengaturan di sini.

Contoh Penggunaan di React

Menunjukkan penggunaan hook useIntlayer dalam sebuah komponen React:

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

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const content = useIntlayer("homepage", locale);

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

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

const ComponentExample: FC = () => {
  const content = useIntlayer("component-example");

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

import { useIntlayer } from "react.intlayer/server";

tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
import { useIntlayer } from "react-intlayer/server";

const ServerComponentExample = () => {
  const content = useIntlayer("server-component");

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

Menangani Atribut

Saat melokalisasi atribut, akses nilai konten dengan tepat:

<button title={content.buttonTitle.value}>{content.buttonText}</button>

Sumber Daya Tambahan

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

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