react-intlayer: NPM-Paket zur Internationalisierung (i18n) einer React-Anwendung

Intlayer ist eine Sammlung von Paketen, die speziell für JavaScript-Entwickler entwickelt wurden. Es ist kompatibel mit Frameworks wie React, React und Express.js.

Das react-intlayer Paket ermöglicht es Ihnen, Ihre React-Anwendung zu internationalisieren. Es stellt Kontext-Provider und Hooks für die Internationalisierung in React bereit.

Warum sollten Sie Ihre React-Anwendung internationalisieren?

Die Internationalisierung Ihrer React-Anwendung ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Nutzers bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.

Warum Intlayer integrieren?

• JavaScript-gesteuertes Content-Management: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
• Typensichere Umgebung: Nutzen Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
• Integrierte Inhaltsdateien: Halten Sie Ihre Übersetzungen nahe bei den jeweiligen Komponenten, um die Wartbarkeit und Übersichtlichkeit zu verbessern.

Installation

Installieren Sie das notwendige Paket mit Ihrem bevorzugten Paketmanager:

npm install react-intlayer

Anwendungsbeispiel

Mit Intlayer können Sie Ihre Inhalte strukturiert an beliebiger Stelle in Ihrem Code deklarieren.

Standardmäßig durchsucht Intlayer Dateien mit der Erweiterung .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Sie können die Standarderweiterung ändern, indem Sie die Eigenschaft contentDir in der Konfigurationsdatei festlegen.

.├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

Deklarieren Sie Ihren Inhalt

react-intlayer ist so konzipiert, dass es mit dem intlayer-Paket zusammenarbeitet. intlayer ist ein Paket, das es Ihnen ermöglicht, Ihren Inhalt überall in Ihrem Code zu deklarieren. Es wandelt mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher um, die nahtlos in Ihre Anwendung integriert werden.

Hier ist ein Beispiel für eine Inhaltsdeklaration:

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Weniger als minus ein Auto",      "-1": "Minus ein Auto",      "0": "Keine Autos",      "1": "Ein Auto",      ">5": "Einige Autos",      ">19": "Viele Autos",    }),  },} satisfies Dictionary;export default component1Content;

Inhalt in Ihrem Code verwenden

Sobald Sie Ihren Inhalt deklariert haben, können Sie ihn in Ihrem Code verwenden. Hier ist ein Beispiel, wie Sie den Inhalt in einer React-Komponente verwenden können:

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Erstelle zugehörige Inhaltsdeklaration  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Die Internationalisierung Ihrer React-Anwendung meistern

Intlayer bietet viele Funktionen, die Ihnen helfen, Ihre React-Anwendung zu internationalisieren.

Um mehr über diese Funktionen zu erfahren, lesen Sie den Leitfaden React Internationalisierung (i18n) mit Intlayer und Vite und React für Vite- und React-Anwendungen oder den Leitfaden React Internationalisierung (i18n) mit Intlayer und React (CRA) für React Create App.

Vom Paket react-intlayer bereitgestellte Funktionen

Das Paket react-intlayer stellt ebenfalls einige Funktionen bereit, die Ihnen bei der Internationalisierung Ihrer Anwendung helfen.

• t()
• useIntlayer()
• useDictionary()
• useLocale()

Dokumentationshistorie

• 5.5.10 - 2025-06-29: Initiale Historie