Erhalten Sie Benachrichtigungen über kommende Intlayer-Veröffentlichungen
    Erstellung:2024-08-11Letzte Aktualisierung:2025-06-29

    React-Integration: useIntlayer Hook Dokumentation

    Dieser Abschnitt bietet eine detaillierte Anleitung zur Verwendung des useIntlayer Hooks in React-Anwendungen, um eine effiziente Inhaltslokalisierung zu ermöglichen.

    Importieren von useIntlayer in React

    Der useIntlayer Hook kann in React-Anwendungen integriert werden, indem er je nach Kontext importiert wird:

    • Client-Komponente:

      typescript
      import { useIntlayer } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
    • Server-Komponente:

    Parameter

    Der Hook akzeptiert zwei Parameter:

    1. key: Der Wörterbuchschlüssel, um lokalisierten Inhalt abzurufen.
    2. locale (optional): Die gewünschte Locale. Standardmäßig wird die Locale des Kontexts verwendet, falls nicht angegeben.

    Wörterbuch

    Alle Wörterbuchschlüssel müssen in Inhaltsdeklarationsdateien deklariert werden, um die Typsicherheit zu erhöhen und Fehler zu vermeiden. Die Setup-Anleitung finden Sie hier.

    Beispielhafte Verwendung in React

    Demonstration des useIntlayer Hooks innerhalb einer React-Komponente:

    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>  );};const ServerComponentExample = () => {  const content = useIntlayer("server-component");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

    Umgang mit Attributen

    Beim Lokalisieren von Attributen greifen Sie entsprechend auf die Inhaltswerte zu:

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

    Zusätzliche Ressourcen

    • Intlayer Visual Editor: Für eine intuitivere Verwaltung von Inhalten finden Sie die Dokumentation zum visuellen Editor hier.

    Dieser Abschnitt richtet sich speziell an die Integration des useIntlayer Hooks in React-Anwendungen, um den Lokalisierungsprozess zu vereinfachen und die Konsistenz der Inhalte über verschiedene Sprachversionen hinweg sicherzustellen.

    Dokumentationshistorie

    • 5.5.10 - 2025-06-29: Initiale Historie
    Erhalten Sie Benachrichtigungen über kommende Intlayer-Veröffentlichungen