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

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

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

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.

useI18n

useLocale