Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
En intégrant le serveur MCP Intlayer à votre assistant AI, vous pouvez récupérer tous les documents directement depuis ChatGPT, DeepSeek, Cursor, VSCode, etc.
Voir la documentation du serveur MCPLe contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
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 :
typescriptCopier le codeCopier 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 :
- key : La clé du dictionnaire pour récupérer le contenu localisé.
- 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 :
Copier le code dans le presse-papiers
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> </> );};
Copier le code dans le presse-papiers
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> );};
Copier le code dans le presse-papiers
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 :
Copier le code dans le presse-papiers
<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