Autor:
    Aymeric PINEAU
    Data utworzenia:2026-01-21Ostatnia aktualizacja:2026-01-21

    Pakiet react-intlayer

    Pakiet react-intlayer dostarcza niezbędne narzędzia do integracji Intlayer z aplikacjami React. Zawiera providery kontekstu, hooki i komponenty do obsługi treści wielojęzycznych.

    Instalacja

    bash
    npm install react-intlayer

    Eksporty

    Providery

    Import:

    tsx
    import "react-intlayer";
    KomponentOpisPowiązana dokumentacja
    IntlayerProviderGłówny provider, który opakowuje Twoją aplikację i zapewnia kontekst Intlayer. Domyślnie zawiera wsparcie dla edytora.IntlayerProvider
    IntlayerProviderContentKomponent-provider skoncentrowany na treści, bez funkcji edytora. Użyj go, gdy nie potrzebujesz edytora wizualnego.-
    HTMLProviderProvider ustawień internacjonalizacji dotyczących HTML. Umożliwia nadpisanie komponentów odpowiadających tagom HTML.-

    Hooki

    Import:

    tsx
    import "react-intlayer";
    HookOpisPowiązana dokumentacja
    useIntlayerHook po stronie klienta, który wybiera jeden słownik według jego klucza i zwraca jego zawartość. Używa locale z kontekstu, jeśli nie jest podane.useIntlayer
    useDictionaryHook, który przekształca obiekt słownika i zwraca zawartość dla bieżącego locale. Przetwarza tłumaczenia t(), enumeracje itp.useDictionary
    useDictionaryAsyncHook obsługujący asynchroniczne słowniki. Akceptuje mapę słowników opartą na Promise i rozwiązuje ją dla bieżącego locale.-
    useDictionaryDynamicHook obsługujący dynamiczne słowniki ładowane po kluczu. Wykorzystuje wewnętrznie React Suspense do obsługi stanów ładowania.-
    useLocaleHook po stronie klienta do pobrania bieżącego locale, domyślnego locale, dostępnych locales oraz funkcji do zmiany locale.useLocale
    useLocaleBaseHook do pobierania bieżącego locale oraz wszystkich powiązanych pól (locale, defaultLocale, availableLocales, setLocale) z kontekstu.-
    usePathnameHook zwracający obecną ścieżkę (pathname) bez segmentu lokalizacji. Reaktywny na nawigację w przeglądarce za pośrednictwem popstate.usePathname
    useRewriteURLHook po stronie klienta do zarządzania przepisywaniem URL. Jeśli dla bieżącej ścieżki (pathname) i locale istnieje reguła przepisywania, zaktualizuje URL.useRewriteURL
    useI18nHook, który dostarcza funkcję tłumaczącą t() do dostępu do zagnieżdżonej zawartości po kluczu. Naśladuje wzorzec i18next/next-intl.useI18n
    useIntlHook, który zapewnia obiekt Intl powiązany z locale. Automatycznie wstrzykuje aktualne locale i korzysta z zoptymalizowanego cachingu.-
    useLocaleStorageHook, który zapewnia trwałość ustawień lokalizacji w localStorage lub w ciasteczkach. Zwraca funkcje getter i setter.-
    useLocaleCookiePrzestarzały. Użyj zamiast tego useLocaleStorage. Hook, który zarządza trwałością ustawień lokalizacji w ciasteczkach.-
    useLoadDynamicHook do ładowania dynamicznych słowników z użyciem React Suspense. Przyjmuje klucz i promise, buforuje wyniki.-
    useIntlayerContextHook, który udostępnia bieżące wartości kontekstu klienta Intlayer (locale, setLocale, itp.).-
    useHTMLContextHook do uzyskiwania dostępu do nadpisanych komponentów HTML z kontekstu HTMLProvider.-

    Funkcje

    Import:

    tsx
    import "react-intlayer";
    FunkcjaOpisPowiązana dokumentacja
    tFunkcja tłumacząca po stronie klienta, która zwraca tłumaczenie podanej wielojęzycznej zawartości. Używa lokalizacji z kontekstu, jeśli nie podano.translation
    getDictionaryPrzetwarza obiekty dictionary i zwraca zawartość dla określonego locale. Obsługuje tłumaczenia t(), enumeracje, markdown, HTML itp.-
    getIntlayerPobiera dictionary po jego kluczu z wygenerowanej deklaracji i zwraca jego zawartość dla określonego locale. Wersja zoptymalizowana funkcji getDictionary.-
    setLocaleInStorageUstawia locale w storage (local storage lub cookie w zależności od konfiguracji).-
    setLocaleCookiePrzestarzałe. Użyj zamiast tego setLocaleInStorage. Ustawia locale w cookie.-
    localeInStoragePobiera locale z pamięci (local storage lub cookie).-
    localeCookiePrzestarzałe. Użyj zamiast tego localeInStorage. Pobiera locale z cookie.-

    Komponenty

    Import:

    tsx
    import "react-intlayer";

    or

    tsx
    import "react-intlayer/markdown";
    KomponentOpisPowiązana dokumentacja
    MarkdownProviderDostawca kontekstu renderowania markdown. Pozwala na niestandardowe nadpisywanie komponentów dla elementów markdown.-
    MarkdownRendererRenderuje treści markdown przy użyciu niestandardowych komponentów. Obsługuje wszystkie standardowe funkcje markdown oraz składnię specyficzną dla Intlayer.MarkdownRenderer

    Typy

    Import:

    tsx
    import "react-intlayer";
    TypOpis
    IntlayerNodeTyp reprezentujący węzeł w drzewie treści Intlayer. Używany do bezpiecznej manipulacji treścią z zachowaniem typów.

    Po stronie serwera (react-intlayer/server)

    Import:

    tsx
    import "react-intlayer/server";
    EksportTypOpis
    IntlayerServerProviderComponentProvider dla renderowania po stronie serwera.
    IntlayerServerComponentWrapper po stronie serwera dla treści Intlayer.
    tFunctionWersja po stronie serwera funkcji tłumaczącej.
    useLocaleHookHook umożliwiający dostęp do locale po stronie serwera.
    useIntlayerHookWersja po stronie serwera hooka useIntlayer.
    useDictionaryHookWersja po stronie serwera hooka useDictionary.
    useI18nHookWersja po stronie serwera hooka useI18n.
    localeFunctionFunkcja do pobierania lub ustawiania locale po stronie serwera.
    validatePrefixIntlayerProvider