Tác giả:
    Aymeric PINEAU
    Ngày tạo:2026-01-21Cập nhật lần cuối:2026-01-21

    Gói react-intlayer

    Gói react-intlayer cung cấp các công cụ cần thiết để tích hợp Intlayer vào các ứng dụng React. Nó bao gồm context providers, hooks và components để xử lý nội dung đa ngôn ngữ.

    Cài đặt

    bash
    npm install react-intlayer

    Exports

    Providers

    Import:

    tsx
    import "react-intlayer";
    ComponentMô tảTài liệu liên quan
    IntlayerProviderProvider chính bao bọc ứng dụng của bạn và cung cấp context của Intlayer. Mặc định bao gồm hỗ trợ editor.IntlayerProvider
    IntlayerProviderContentMột component provider tập trung vào nội dung mà không có các tính năng editor. Sử dụng khi bạn không cần trình chỉnh sửa trực quan.-
    HTMLProviderProvider cho các thiết lập quốc tế hóa (i18n) liên quan đến HTML. Cho phép ghi đè component cho các thẻ HTML.-

    Hooks

    Nhập:

    tsx
    import "react-intlayer";
    HookMô tảTài liệu liên quan
    useIntlayerHook phía client chọn một dictionary theo khóa và trả về nội dung của nó. Sử dụng locale từ context nếu không được cung cấp.useIntlayer
    useDictionaryHook chuyển đổi một đối tượng dictionary và trả về nội dung cho locale hiện tại. Xử lý các bản dịch t(), enumerations, v.v.useDictionary
    useDictionaryAsyncHook xử lý các dictionary bất đồng bộ. Chấp nhận một map dictionary dựa trên Promise và giải quyết nó cho locale hiện tại.-
    useDictionaryDynamicHook xử lý các từ điển động được tải theo khóa. Sử dụng React Suspense nội bộ để xử lý trạng thái tải.-
    useLocaleHook phía client để lấy locale hiện tại, default locale, các locale khả dụng, và một hàm để cập nhật locale.useLocale
    useLocaleBaseHook để lấy locale hiện tại và tất cả các trường liên quan (locale, defaultLocale, availableLocales, setLocale) từ context.-
    usePathnameHook trả về đường dẫn hiện tại (pathname) đã được loại bỏ phân đoạn locale. Có tính phản hồi với điều hướng của trình duyệt qua popstate.usePathname
    useRewriteURLHook phía client để quản lý việc rewrite URL. Nếu tồn tại quy tắc rewrite cho pathname và locale hiện tại, nó sẽ cập nhật URL.useRewriteURL
    useI18nHook cung cấp một hàm dịch t() để truy cập nội dung lồng nhau theo khóa. Bắt chước mẫu i18next/next-intl.useI18n
    useIntlHook cung cấp một đối tượng Intl liên kết với locale. Tự động chèn locale hiện tại và sử dụng bộ nhớ đệm tối ưu.-
    useLocaleStorageHook cung cấp khả năng lưu trữ locale trong localStorage hoặc cookies. Trả về các hàm getter và setter.-
    useLocaleCookieKhông còn được khuyến nghị (Deprecated). Sử dụng useLocaleStorage thay thế. Hook quản lý việc lưu trữ locale trong cookies.-
    useLoadDynamicHook để tải các từ điển động sử dụng React Suspense. Nhận một key và một Promise, lưu kết quả vào cache.-
    useIntlayerContextHook cung cấp các giá trị context hiện tại của client Intlayer (locale, setLocale, v.v.).-
    useHTMLContextHook để truy cập các override (ghi đè) của component HTML từ context HTMLProvider.-

    Hàm

    Nhập:

    tsx
    import "react-intlayer";
    HàmMô tảTài liệu liên quan
    tHàm dịch phía client trả về bản dịch của nội dung đa ngôn ngữ được cung cấp. Sử dụng locale từ context nếu không được cung cấp.dịch
    getDictionaryXử lý các đối tượng dictionary và trả về nội dung cho locale được chỉ định. Xử lý các bản dịch t(), enumerations, markdown, HTML, v.v.-
    getIntlayerLấy một dictionary theo key từ declaration được sinh và trả về nội dung cho locale được chỉ định. Phiên bản tối ưu của getDictionary.-
    setLocaleInStorageĐặt locale vào bộ nhớ (local storage hoặc cookie tùy theo cấu hình).-
    setLocaleCookieĐã lỗi thời. Sử dụng setLocaleInStorage thay thế. Đặt locale trong cookie.-
    localeInStorageLấy locale từ storage (local storage hoặc cookie).-
    localeCookieKhông còn được dùng. Sử dụng localeInStorage thay thế. Lấy locale từ cookie.-

    Thành phần

    Nhập:

    tsx
    import "react-intlayer";

    hoặc

    tsx
    import "react-intlayer/markdown";
    Thành phầnMô tảTài liệu liên quan
    MarkdownProviderProvider cho ngữ cảnh render markdown. Cho phép ghi đè các component tùy chỉnh cho các phần tử markdown.-
    MarkdownRendererHiển thị nội dung markdown với các component tùy chỉnh. Hỗ trợ tất cả các tính năng markdown chuẩn và cú pháp đặc thù của Intlayer.MarkdownRenderer

    Kiểu

    Nhập:

    tsx
    import "react-intlayer";
    KiểuMô tả
    IntlayerNodeKiểu đại diện cho một node trong cây nội dung Intlayer. Dùng để thao tác nội dung an toàn về kiểu.

    Phía server (react-intlayer/server)

    Import:

    tsx
    import "react-intlayer/server";
    ExportKiểuMô tả
    IntlayerServerProviderComponentProvider cho kết xuất phía server.
    IntlayerServerComponentWrapper phía server cho nội dung Intlayer.
    tFunctionPhiên bản phía server của hàm dịch.
    useLocaleHookHook để truy cập locale ở phía server.
    useIntlayerHookPhiên bản phía server của useIntlayer.
    useDictionaryHookPhiên bản phía server của useDictionary.
    useI18nHookPhiên bản phía server của useI18n.
    localeFunctionHàm để lấy hoặc đặt locale trên server.
    validatePrefixIntlayerProvider