Hook useIntlayer memungkinkan Anda untuk mengambil konten terlokalisasi dari kamus menggunakan kuncinya. Hook ini didasarkan pada useDictionary tetapi secara otomatis menyuntikkan versi yang dioptimalkan dari kamus dari deklarasi yang dihasilkan.

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