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

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

    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.

    useI18n
    useLocale