Dibuat:2025-08-23Terakhir diperbarui:2025-08-23

Referensikan dokumen ini ke asisten AI favorit AndaChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Tambahkan MCP Server ke AI Assistant Anda

Dengan mengintegrasikan Intlayer MCP Server ke AI assistant favorit Anda, Anda dapat mengambil seluruh dokumentasi langsung dari ChatGPT, DeepSeek, Cursor, VSCode, dll.

Lihat dokumentasi MCP Server

Riwayat Versi

Inisialisasi riwayat
v5.5.1029/6/2025

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Sunting dokumen ini

Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

Tautan GitHub ke dokumentasi

Salin

Salin Markdown dokumentasi ke clipboard

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:

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

Komponen Server:

Parameter

Hook ini menerima dua parameter:

key: Kunci kamus untuk mengambil konten yang sudah dilokalkan.
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:

src/app.tsx

Salin kode

Salin kode ke clipboard

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 { 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>    </>  );};

src/components/ComponentExample.tsx

Salin kode

Salin kode ke clipboard

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 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>  );};

src/components/ServerComponentExample.tsx

Salin kode

Salin kode ke clipboard

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>  );};

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.

Mengapa Intlayer?