Auteur:
    Aymeric PINEAU
    Création:2026-01-21Dernière mise à jour:2026-01-21

    Package react-intlayer

    Le package react-intlayer fournit les outils nécessaires pour intégrer Intlayer dans les applications React. Il inclut des providers de contexte, des hooks et des composants pour gérer du contenu multilingue.

    Installation

    bash
    npm install react-intlayer

    Exports

    Providers

    Import:

    tsx
    import "react-intlayer";
    ComposantDescriptionDocumentation associée
    IntlayerProviderLe provider principal qui enveloppe votre application et fournit le contexte Intlayer. Inclut la prise en charge de l'éditeur par défaut.IntlayerProvider
    IntlayerProviderContentUn composant provider axé sur le contenu sans les fonctionnalités de l'éditeur. Utilisez-le lorsque vous n'avez pas besoin de l'éditeur visuel.-
    HTMLProviderProvider pour les paramètres d'internationalisation liés au HTML. Permet de surcharger les composants pour les balises HTML.-

    Hooks

    Import :

    tsx
    import "react-intlayer";
    HookDescriptionDocumentation associée
    useHTMLRendererHook pour obtenir une fonction de rendu HTML préconfigurée.-
    useMarkdownRendererHook pour obtenir une fonction de rendu Markdown préconfigurée.-
    useIntlayerHook côté client qui récupère un dictionnaire par sa clé et renvoie son contenu. Utilise la locale du contexte si aucune n'est fournie.useIntlayer
    useDictionaryHook qui transforme un objet de dictionnaire et renvoie le contenu pour la locale courante. Traite les traductions t(), les énumérations, etc.useDictionary
    useDictionaryAsyncHook qui gère des dictionnaires asynchrones. Accepte une map de dictionnaires basée sur des promises et la résout pour la locale courante.-
    useDictionaryDynamicHook qui gère des dictionnaires dynamiques chargés par clé. Utilise React Suspense en interne pour gérer les états de chargement.-
    useLocaleHook côté client pour obtenir la locale courante, la locale par défaut, les locales disponibles, et une fonction pour mettre à jour la locale.useLocale
    useLocaleBaseHook pour obtenir la locale actuelle et tous les champs associés (locale, defaultLocale, availableLocales, setLocale) depuis le contexte.-
    usePathnameHook qui renvoie le chemin actuel (pathname) avec le segment de locale supprimé. Réactif à la navigation du navigateur via popstate.usePathname
    useRewriteURLHook côté client pour gérer les réécritures d'URL. Si une règle de réécriture existe pour le pathname et la locale actuels, elle mettra à jour l'URL.useRewriteURL
    useI18nHook qui fournit une fonction de traduction t() pour accéder au contenu imbriqué par clé. Imite le pattern i18next/next-intl.useI18n
    useIntlHook qui fournit un objet Intl lié à la locale. Injecte automatiquement la locale courante et utilise un cache optimisé.-
    useLocaleStorageHook qui fournit la persistance de la locale dans localStorage ou les cookies. Renvoie des fonctions getter et setter.-
    useLocaleCookieDéprécié. Utilisez useLocaleStorage à la place. Hook qui gère la persistance de la locale via les cookies.-
    useLoadDynamicHook pour charger des dictionnaires dynamiques en utilisant React Suspense. Accepte une clé et une promesse, met en cache les résultats.-
    useIntlayerContextHook qui fournit les valeurs du contexte client Intlayer actuel (locale, setLocale, etc.).-
    useHTMLContextHook pour accéder aux overrides des composants HTML depuis le contexte HTMLProvider.-

    Fonctions

    Import:

    tsx
    import "react-intlayer";
    FonctionDescriptionDoc liée
    renderHTMLUtilitaire autonome pour rendre du HTML en dehors des composants.-
    renderMarkdownUtilitaire autonome pour rendre du Markdown en dehors des composants.-
    tFonction de traduction côté client qui retourne la traduction du contenu multilingue fourni. Utilise la locale du contexte si elle n'est pas fournie.translation
    getDictionaryTraite les objets dictionnaire et renvoie le contenu pour la locale spécifiée. Traite les traductions t(), les énumérations, le markdown, le HTML, etc.-
    getIntlayerRécupère un dictionnaire par sa clé depuis la déclaration générée et renvoie son contenu pour la locale spécifiée. Version optimisée de getDictionary.-
    setLocaleInStorageDéfinit la locale dans le stockage (local storage ou cookie selon la configuration).-
    setLocaleCookieDéprécié. Utilisez setLocaleInStorage à la place. Définit la locale dans un cookie.-
    localeInStorageRécupère la locale depuis le stockage (localStorage ou cookie).-
    localeCookieObsolète. Utilisez localeInStorage à la place. Récupère la locale depuis le cookie.-

    Composants

    Importer :

    tsx
    import "react-intlayer";

    ou

    tsx
    import "react-intlayer/markdown";
    ComposantDescriptionDocumentation associée
    HTMLRendererRend du contenu HTML avec des composants personnalisés.-
    MarkdownProviderProvider pour le contexte de rendu markdown. Permet de remplacer des composants pour les éléments markdown.-
    MarkdownRendererRend du contenu markdown avec des composants personnalisés. Prend en charge toutes les fonctionnalités standard du markdown et la syntaxe spécifique à Intlayer.MarkdownRenderer

    Types

    Import :

    tsx
    import "react-intlayer";
    TypeDescription
    IntlayerNodeType représentant un nœud dans l'arbre de contenu Intlayer. Utilisé pour la manipulation de contenu typée.

    Côté serveur (react-intlayer/server)

    Import :

    tsx
    import "react-intlayer/server";
    ExportTypeDescription
    IntlayerServerProviderComponentProvider pour le rendu côté serveur.
    IntlayerServerComponentWrapper côté serveur pour le contenu Intlayer.
    tFunctionVersion côté serveur de la fonction de traduction.
    useLocaleHookHook pour accéder à la locale côté serveur.
    useIntlayerHookVersion côté serveur de useIntlayer.
    useDictionaryHookVersion côté serveur de useDictionary.
    useI18nHookVersion côté serveur de useI18n.
    localeFunctionFonction pour obtenir ou définir la locale côté serveur.
    validatePrefixIntlayerProvider