Autor:
    Aymeric PINEAU
    Erstellung:2026-01-21Letzte Aktualisierung:2026-01-21

    react-intlayer-Paket

    Das react-intlayer-Paket stellt die notwendigen Werkzeuge zur Integration von Intlayer in React-Anwendungen bereit. Es enthält Context-Provider, Hooks und Komponenten zur Verarbeitung mehrsprachiger Inhalte.

    Installation

    bash
    npm install react-intlayer

    Exporte

    Provider

    Import:

    tsx
    import "react-intlayer";
    KomponenteBeschreibungZugehöriges Dokument
    IntlayerProviderDer Haupt-Provider, der Ihre Anwendung umschließt und den Intlayer-Kontext bereitstellt. Enthält standardmäßig Editor-Unterstützung.IntlayerProvider
    IntlayerProviderContentEine Provider-Komponente, die sich auf Inhalte ohne Editor-Funktionen konzentriert. Verwenden Sie diese, wenn Sie den visuellen Editor nicht benötigen.-
    HTMLProviderProvider für HTML-bezogene Internationalisierungseinstellungen. Ermöglicht das Überschreiben von Komponenten für HTML-Tags.-

    Hooks

    Importieren:

    tsx
    import "react-intlayer";
    HookBeschreibungVerwandte Dokumentation
    useHTMLRendererHook, um eine vorkonfigurierte HTML-Renderer-Funktion zu erhalten.-
    useMarkdownRendererHook, um eine vorkonfigurierte Markdown-Renderer-Funktion zu erhalten.-
    useIntlayerClient-seitiger Hook, der ein Dictionary anhand seines Schlüssels auswählt und dessen Inhalt zurückgibt. Verwendet die Locale aus dem Kontext, falls keine angegeben ist.useIntlayer
    useDictionaryHook, der ein Dictionary-Objekt transformiert und den Inhalt für die aktuelle locale zurückgibt. Verarbeitet t()-Übersetzungen, Enumerationen usw.useDictionary
    useDictionaryAsyncHook, der asynchrone Dictionaries verarbeitet. Akzeptiert eine promise-basierte Dictionary-Map und löst sie für die aktuelle locale auf.-
    useDictionaryDynamicHook, der dynamische, nach Schlüssel geladene Wörterbücher verwaltet. Verwendet intern React Suspense für Ladezustände.-
    useLocaleClient-seitiger Hook, um die aktuelle Locale, die Standard-Locale, verfügbare Locales und eine Funktion zum Aktualisieren der Locale zu erhalten.useLocale
    useLocaleBaseHook, um die aktuelle Locale und alle zugehörigen Felder (locale, defaultLocale, availableLocales, setLocale) aus dem Kontext zu erhalten.-
    usePathnameHook, der den aktuellen Pfadnamen (pathname) zurückgibt, wobei das Locale-Segment entfernt wurde. Reaktiv auf Browser-Navigation über popstate.usePathname
    useRewriteURLClient-seitiger Hook, um URL-Rewrites zu verwalten. Wenn eine Rewrite-Regel für den aktuellen pathname und die locale existiert, wird die URL aktualisiert.useRewriteURL
    useI18nHook, der eine Übersetzungsfunktion t() bereitstellt, um per Schlüssel auf verschachtelte Inhalte zuzugreifen. Imitiert das Verhalten von i18next/next-intl.useI18n
    useIntlHook, der ein lokalgebundenes Intl-Objekt bereitstellt. Injiziert automatisch die aktuelle Locale und verwendet optimiertes Caching.-
    useLocaleStorageHook, der die Persistenz der Locale im Local Storage oder in Cookies bereitstellt. Gibt Getter- und Setter-Funktionen zurück.-
    useLocaleCookieVeraltet. Verwenden Sie stattdessen useLocaleStorage. Hook, der die Persistenz der Locale in Cookies verwaltet.-
    useLoadDynamicHook zum Laden dynamischer Dictionaries mithilfe von React Suspense. Akzeptiert einen key und ein Promise, cached die Ergebnisse.-
    useIntlayerContextHook, der die aktuellen Intlayer-Client-Kontextwerte (locale, setLocale, etc.) bereitstellt.-
    useHTMLContextHook, um auf HTML-Komponenten-Overrides aus dem HTMLProvider-Kontext zuzugreifen.-

    Funktionen

    Import:

    tsx
    import "react-intlayer";
    FunktionBeschreibungVerwandtes Dokument
    renderHTMLEigenständiges Utility zum Rendern von HTML außerhalb von Komponenten.-
    renderMarkdownEigenständiges Utility zum Rendern von Markdown außerhalb von Komponenten.-
    tClientseitige Übersetzungsfunktion, die die Übersetzung des bereitgestellten mehrsprachigen Inhalts zurückgibt. Verwendet die Locale aus dem Kontext, falls keine angegeben ist.translation
    getDictionaryVerarbeitet Wörterbuchobjekte und gibt Inhalte für die angegebene locale zurück. Verarbeitet t()-Übersetzungen, Aufzählungen, Markdown, HTML usw.-
    getIntlayerRuft ein Wörterbuch anhand seines Schlüssels aus der generierten Deklaration ab und gibt dessen Inhalt für die angegebene locale zurück. Optimierte Version von getDictionary.-
    setLocaleInStorageSetzt die locale im Speicher (Local Storage oder Cookie, abhängig von der Konfiguration).-
    setLocaleCookieVeraltet. Verwende stattdessen setLocaleInStorage. Legt die locale in einem Cookie fest.-
    localeInStorageHolt die Locale aus dem Speicher (localStorage oder Cookie).-
    localeCookieVeraltet. Verwenden Sie stattdessen localeInStorage. Holt die Locale aus dem Cookie.-

    Komponenten

    Importieren:

    tsx
    import "react-intlayer";

    oder

    tsx
    import "react-intlayer/markdown";
    KomponenteBeschreibungZugehöriges Dokument
    HTMLRendererRendert HTML-Inhalte mit benutzerdefinierten Komponenten.-
    MarkdownProviderProvider für den Markdown-Rendering-Kontext. Ermöglicht benutzerdefinierte Komponentenüberschreibungen für Markdown-Elemente.-
    MarkdownRendererRendert Markdown-Inhalte mit benutzerdefinierten Komponenten. Unterstützt alle Standard-Markdown-Funktionen und Intlayer-spezifische Syntax.MarkdownRenderer

    Typen

    Import:

    tsx
    import "react-intlayer";
    TypBeschreibung
    IntlayerNodeTyp, der einen Knoten im Intlayer-Inhaltsbaum repräsentiert. Wird für typsichere Inhaltsmanipulation verwendet.

    Server-seitig (react-intlayer/server)

    Import:

    tsx
    import "react-intlayer/server";
    ExportTypBeschreibung
    IntlayerServerProviderComponentProvider für serverseitiges Rendering.
    IntlayerServerComponentServerseitiger Wrapper für Intlayer-Inhalte.
    tFunctionServerseitige Version der Übersetzungsfunktion.
    useLocaleHookHook, um serverseitig auf die Locale zuzugreifen.
    useIntlayerHookServerseitige Version von useIntlayer.
    useDictionaryHookServerseitige Version von useDictionary.
    useI18nHookServerseitige Version von useI18n.
    localeFunctionFunktion, um die Locale auf dem Server abzurufen oder zu setzen.
    validatePrefixIntlayerProvider