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

  Copier le contenu

  Copier le code

  Copier le code dans le presse-papiers

  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 :

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>
    </>
  );
};

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>
  );
};

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 :

<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.