Hook useIntlayer cho phép bạn truy xuất nội dung được bản địa hóa từ một từ điển bằng khóa của nó. Nó dựa trên useDictionary nhưng tự động đưa vào một phiên bản tối ưu hóa của từ điển từ các khai báo được tạo ra.

Ví dụ sử dụng trong React

Minh họa hook useIntlayer trong một component React:

src/app.tsx

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào 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

Sao chép mã

Sao chép mã vào clipboard

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

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

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

Tài nguyên Bổ sung

Trình chỉnh sửa trực quan Intlayer: Để có trải nghiệm quản lý nội dung trực quan hơn, hãy tham khảo tài liệu trình chỉnh sửa trực quan tại đây.

Phần này tập trung cụ thể vào việc tích hợp hook useIntlayer trong các ứng dụng React, giúp đơn giản hóa quá trình bản địa hóa và đảm bảo tính nhất quán của nội dung trên các ngôn ngữ khác nhau.

useI18n

useLocale