Автор:
    БозданиС:2026-09-19ПослСднСС обновлСниС:2026-09-19

    ΠŸΠ°ΠΊΠ΅Ρ‚ remix-intlayer

    ΠŸΠ°ΠΊΠ΅Ρ‚ remix-intlayer прСдоставляСт инструмСнты для ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Intlayer Π² прилоТСния Remix 3. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ ПО (middleware) для опрСдСлСния Π»ΠΎΠΊΠ°Π»ΠΈ запроса, доступ ΠΊ контСксту запроса ΠΈ Ρ…ΡƒΠΊΠΈ для получСния словарСй ΠΈ управлСния локалями.

    Установка

    bash
    npm install remix-intlayer
    

    Экспорты ΠΏΠ°ΠΊΠ΅Ρ‚Π°

    ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ ПО (Middleware)

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import { intlayer } from "remix-intlayer";
    
    Π­ΠΊΡΠΏΠΎΡ€Ρ‚Π’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅Π‘Π²ΡΠ·Π°Π½Π½Π°Ρ докумСнтация
    intlayerЀункция MiddlewareΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ ПО для Remix 3, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ локаль запроса, ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ пСрСнаправлСниями ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ контСкст запроса.ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ ПО intlayer

    Π₯Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ контСкста

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import { Intlayer, INTLAYER_CONTEXT_PROPERTY } from "remix-intlayer";
    
    Π­ΠΊΡΠΏΠΎΡ€Ρ‚Π’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅Π‘Π²ΡΠ·Π°Π½Π½Π°Ρ докумСнтация
    IntlayerΠšΠ»ΡŽΡ‡ RequestContext / Π₯Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ΠšΠ»ΡŽΡ‡ контСкста запроса, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для извлСчСния состояния Intlayer ΠΈΠ· контСкста запроса Remix 3 (context.get(Intlayer)).ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ Intlayer
    INTLAYER_CONTEXT_PROPERTYstringИмя свойства ('intlayer'), установлСнноС нСпосрСдствСнно Π² контСкстС запроса, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ доступ Ρ‡Π΅Ρ€Π΅Π· context.intlayer ΠΈ context.get(Intlayer).-

    Π₯ΡƒΠΊΠΈ

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import { useIntlayer, useDictionary, useLocale } from "remix-intlayer";
    
    Π­ΠΊΡΠΏΠΎΡ€Ρ‚Π’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅Π‘Π²ΡΠ·Π°Π½Π½Π°Ρ докумСнтация
    useIntlayerΠ₯ΡƒΠΊΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΈ Π΄Π΅ΠΊΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ словаря ΠΏΠΎ ΠΊΠ»ΡŽΡ‡Ρƒ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ запроса.Π₯ΡƒΠΊ useIntlayer
    useDictionaryΠ₯ΡƒΠΊΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ словаря для Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ запроса.Π₯ΡƒΠΊ useDictionary
    useLocaleΠ₯ΡƒΠΊΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ доступ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ запроса, Π»ΠΎΠΊΠ°Π»ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ списку доступных Π»ΠΎΠΊΠ°Π»Π΅ΠΉ.Π₯ΡƒΠΊ useLocale

    Π£Ρ‚ΠΈΠ»ΠΈΡ‚Ρ‹

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import { createLocaleRouting, getIntlayerState } from "remix-intlayer";
    
    Π€ΡƒΠ½ΠΊΡ†ΠΈΡΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅Π‘Π²ΡΠ·Π°Π½Π½Π°Ρ докумСнтация
    createLocaleRoutingЧистая функция, которая вычисляСт Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ Π»ΠΎΠΊΠ°Π»ΠΈ (redirect, rewrite ΠΈΠ»ΠΈ pass) Π½Π° основС запроса, ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².-
    getIntlayerStateΠ‘Ρ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС IntlayerState (locale, defaultLocale, availableLocales) ΠΈΠ· области запроса AsyncLocalStorage Π²Π½Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React.-

    Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‚Π΅Ρ€Ρ‹ (remix-intlayer/format)

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import {
      useIntl,
      useDate,
      useNumber,
      useCurrency,
      usePercentage,
      useRelativeTime,
      useList,
      useUnit,
      useCompact,
    } from "remix-intlayer/format";
    
    Π₯ΡƒΠΊΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
    useIntlΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ экзСмпляр Intl, привязанный ΠΊ Π»ΠΎΠΊΠ°Π»ΠΈ запроса ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° с возмоТностями ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈ подписки.
    useDateΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования Π΄Π°Ρ‚Ρ‹, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ (Intl.DateTimeFormat).
    useNumberΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования чисСл, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ (Intl.NumberFormat).
    useCurrencyΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования Π²Π°Π»ΡŽΡ‚Ρ‹, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ.
    usePercentageΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ², ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ.
    useRelativeTimeΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ (Intl.RelativeTimeFormat).
    useListΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования списков, ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ (Intl.ListFormat).
    useUnitΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ форматирования Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния, ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ.
    useCompactΠ’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ³ΠΎ форматирования чисСл, ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΡƒΡŽ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π»ΠΎΠΊΠ°Π»ΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 1.5K).

    HTML-ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ (remix-intlayer/html)

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import { renderHTML, useHTML, useHTMLRenderer } from "remix-intlayer/html";
    
    Π­ΠΊΡΠΏΠΎΡ€Ρ‚Π’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
    renderHTMLFunctionАвтономная слуТСбная функция для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° HTML-ΡƒΠ·Π»ΠΎΠ².
    useHTMLHookΠ₯ΡƒΠΊ для получСния контСкста ΠΈ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ HTML-ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π°.
    useHTMLRendererHookΠ₯ΡƒΠΊ для получСния ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° HTML.

    Markdown-ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρ‹ (remix-intlayer/markdown)

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import {
      compileMarkdown,
      renderMarkdown,
      parseMarkdown,
      useMarkdown,
      useMarkdownRenderer,
    } from "remix-intlayer/markdown";
    
    Π­ΠΊΡΠΏΠΎΡ€Ρ‚Π’ΠΈΠΏΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
    compileMarkdownFunctionΠšΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ строки markdown Π² структурированноС прСдставлСниС.
    renderMarkdownFunctionΠ Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ содСрТимоС markdown Π² Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅ ΡƒΠ·Π»Ρ‹.
    parseMarkdownFunctionАнализируСт Π½Π΅ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ markdown Π² AST.
    useMarkdownHookΠ₯ΡƒΠΊ для получСния контСкста ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€Π° markdown.
    useMarkdownRendererHookΠ₯ΡƒΠΊ для получСния ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Markdown.

    Π’ΠΈΠΏΡ‹

    Π˜ΠΌΠΏΠΎΡ€Ρ‚:

    tsx
    import type {
      IntlayerState,
      IntlayerMiddlewareOptions,
      LocaleRoutingOptions,
      LocaleRoutingAction,
      LocaleRoutingRequest,
      UseLocaleResult,
    } from "remix-intlayer";
    
    ВипОписаниС
    IntlayerStateΠžΠ±ΡŠΠ΅ΠΊΡ‚ состояния, содСрТащий locale, defaultLocale ΠΈ availableLocales, сохранСнный Π² контСкстС запроса Remix.
    IntlayerMiddlewareOptionsΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ Π² ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ ПО intlayer().
    LocaleRoutingOptionsΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для настройки прСфиксов Π»ΠΎΠΊΠ°Π»Π΅ΠΉ, обнаруТСния ΠΈ ΠΏΠ΅Ρ€Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΉ.
    LocaleRoutingActionДискриминированноС объСдинСниС, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ: redirect, rewrite ΠΈΠ»ΠΈ pass.
    LocaleRoutingRequestМинимальноС прСдставлСниС запроса, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для createLocaleRouting.
    UseLocaleResultΠ’ΠΈΠΏ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΠΎΠ³ΠΎ значСния useLocale(), содСрТащий locale, defaultLocale ΠΈ availableLocales.