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.

Importation de useIntlayer dans React

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

• Composant Client :

  typescript

  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, utilise la locale du contexte si non spécifiée.

Dictionnaire

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

Exemple d'utilisation dans React

Démonstration du hook useIntlayer dans un composant React :

// Exemple d'utilisation dans une application Reactimport 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>    </>  );};

// Exemple de composant utilisant le hook useIntlayerimport 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>  );};

// Exemple de composant serveur utilisant le hook useIntlayerimport { 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 de 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 entre les différentes locales.