Recevez des notifications en avant-première sur les prochains lancements de Intlayer
    Création:2024-08-11Dernière mise à jour:2025-06-29

    Intégration React : Documentation du Hook useIntlayer

    Cette section fournit des instructions détaillées sur l'utilisation du hook useIntlayer dans les applications React, permettant une localisation efficace du contenu.

    Importer useIntlayer dans React

    Le hook useIntlayer peut être intégré dans les applications React en l'important selon le contexte :

    • Composant Client :

      typescript
      import { useIntlayer } from "react-intlayer"; // Utilisé dans les composants React côté client
    • Composant Serveur :

    Paramètres

    Le hook accepte deux paramètres :

    1. key : La clé du dictionnaire pour récupérer le contenu localisé.
    2. locale (optionnel) : La locale souhaitée. Par défaut, la locale du contexte est utilisée si elle n'est pas spécifiée.

    Dictionnaire

    Toutes les clés du dictionnaire doivent être déclarées dans des fichiers de déclaration de contenu afin d'améliorer la sécurité des types et d'éviter les erreurs. Vous pouvez trouver les instructions d'installation ici.

    Exemple d'utilisation dans React

    Démonstration du hook useIntlayer dans un composant React :

    src/app.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const content = useIntlayer("homepage", locale);  return (    <>      <p>{content.introduction}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => {  const content = useIntlayer("server-component");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

    Gestion des attributs

    Lors de la localisation des attributs, accédez aux valeurs du contenu de manière appropriée :

    jsx
    <button title={content.buttonTitle.value}>{content.buttonText}</button>

    Ressources supplémentaires

    • Éditeur visuel Intlayer : Pour une expérience de gestion de contenu plus intuitive, consultez la documentation de l'éditeur visuel ici.

    Cette section cible spécifiquement l'intégration du hook useIntlayer dans les applications React, simplifiant le processus de localisation et garantissant la cohérence du contenu à travers différentes locales.

    Historique de la documentation

    • 5.5.10 - 2025-06-29 : Historique initial
    Recevez des notifications en avant-première sur les prochains lancements de Intlayer