Автор:
    Aymeric PINEAU
    Дата створення:2026-01-21Останнє оновлення:2026-01-21

    Пакет react-intlayer

    Пакет react-intlayer надає необхідні інструменти для інтеграції Intlayer у React-додатки. Він включає контекстні провайдери, хуки та компоненти для роботи з багатомовним контентом.

    Встановлення

    bash
    npm install react-intlayer

    Експорти

    Провайдери

    Імпорт:

    tsx
    import "react-intlayer";
    КомпонентОписПов'язаний документ
    IntlayerProviderГоловний провайдер, який обгортає ваш застосунок і надає контекст Intlayer. За замовчуванням містить підтримку редактора.IntlayerProvider
    IntlayerProviderContentКомпонент-провайдер, орієнтований на контент без функцій редактора. Використовуйте його, коли вам не потрібен візуальний редактор.-
    HTMLProviderПровайдер для налаштувань інтернаціоналізації, пов'язаних з HTML. Дозволяє перевизначати компоненти для HTML-тегів.-

    Хуки

    Імпорт:

    tsx
    import "react-intlayer";
    ХукОписПов'язаний документ
    useIntlayerКлієнтський hook, який вибирає словник за його ключем і повертає його вміст. Використовує локаль із контексту, якщо вона не вказана.useIntlayer
    useDictionaryХук, який перетворює об'єкт словника та повертає вміст для поточної локалі. Обробляє переклади t(), enumerations, тощо.useDictionary
    useDictionaryAsyncХук, який обробляє асинхронні словники. Приймає мапу словників, що повертають Promise, і вирішує її для поточної локалі.-
    useDictionaryDynamicХук, що обробляє динамічні словники, завантажувані за ключем. Використовує React Suspense для обробки станів завантаження.-
    useLocaleКлієнтський хук для отримання поточної локалі, локалі за замовчуванням, доступних локалей та функції для оновлення локалі.useLocale
    useLocaleBaseХук для отримання поточної локалі та всіх пов'язаних полів (locale, defaultLocale, availableLocales, setLocale) з контексту.-
    usePathnameХук, який повертає поточний шлях (pathname) із видаленим сегментом локалі. Реактивно реагує на навігацію браузера через popstate.usePathname
    useRewriteURLКлієнтський хук для керування переписуванням URL. Якщо для поточного pathname і локалі існує правило переписування, він оновить URL.useRewriteURL
    useI18nХук, що надає функцію перекладу t() для доступу до вкладених даних за ключем. Наслідує патерн i18next/next-intl.useI18n
    useIntlХук, який надає об'єкт Intl, прив'язаний до локалі. Автоматично підставляє поточну локаль і використовує оптимізоване кешування.-
    useLocaleStorageХук, який забезпечує збереження локалі у local storage або cookies. Повертає функції отримання та встановлення.-
    useLocaleCookieЗастарілий. Використовуйте натомість useLocaleStorage. Хук, який керує збереженням локалі в cookies.-
    useLoadDynamicХук для завантаження динамічних словників за допомогою React Suspense. Приймає ключ і проміс, кешує результати.-
    useIntlayerContextХук, який надає поточні значення контексту клієнта Intlayer (locale, setLocale тощо).-
    useHTMLContextХук для доступу до перевизначень HTML-компонентів із контексту HTMLProvider.-

    Функції

    Імпорт:

    tsx
    import "react-intlayer";
    ФункціяОписПов'язаний документ
    tФункція перекладу на стороні клієнта, що повертає переклад наданого багатомовного вмісту. Використовує локаль із контексту, якщо не вказано.переклад
    getDictionaryОбробляє об'єкти словника та повертає вміст для вказаної локалі. Обробляє переклади t(), переліки, Markdown, HTML тощо.-
    getIntlayerОтримує словник за його ключем із згенерованої декларації та повертає його вміст для вказаної локалі. Оптимізована версія getDictionary.-
    setLocaleInStorageВстановлює локаль у сховищі (local storage або cookie залежно від конфігурації).-
    setLocaleCookieЗастаріло. Використовуйте setLocaleInStorage натомість. Встановлює локаль у cookie.-
    localeInStorageОтримує локаль зі сховища (localStorage або cookie).-
    localeCookieЗастаріле. Використовуйте localeInStorage натомість. Отримує локаль з cookie.-

    Компоненти

    Імпорт:

    tsx
    import "react-intlayer";

    або

    tsx
    import "react-intlayer/markdown";
    КомпонентОписПов'язаний документ
    MarkdownProviderПровайдер для контексту рендерингу Markdown. Дозволяє перевизначати компоненти для елементів markdown.-
    MarkdownRendererВідтворює вміст markdown з користувацькими компонентами. Підтримує всі стандартні можливості markdown та синтаксис, специфічний для Intlayer.MarkdownRenderer

    Типи

    Імпорт:

    tsx
    import "react-intlayer";
    ТипОпис
    IntlayerNodeТип, що представляє вузол у дереві контенту Intlayer. Використовується для типобезпечної (type-safe) маніпуляції контентом.

    Серверна сторона (react-intlayer/server)

    Імпорт:

    tsx
    import "react-intlayer/server";
    ЕкспортТипОпис
    IntlayerServerProviderComponentПровайдер для рендерингу на сервері.
    IntlayerServerComponentСерверна обгортка для контенту Intlayer.
    tFunctionСерверна версія функції перекладу.
    useLocaleHookХук для доступу до локалі на серверній стороні.
    useIntlayerHookСерверна версія useIntlayer.
    useDictionaryHookСерверна версія useDictionary.
    useI18nHookСерверна версія useI18n.
    localeFunctionФункція для отримання або встановлення локалі на сервері.
    validatePrefixIntlayerProvider