Integracja z React: Dokumentacja hooka useDictionary

Ta sekcja zawiera szczegółowe wskazówki dotyczące używania hooka useDictionary w aplikacjach React, umożliwiając efektywne zarządzanie lokalizowanymi treściami bez wizualnego edytora.

Importowanie useDictionary w React

Hook useDictionary można zintegrować z aplikacjami React, importując go w zależności od kontekstu:

• Komponent Klienta:

  import { useDictionary } from "next-intlayer"; // Używane w komponentach React po stronie klienta

  import { useDictionary } from "next-intlayer"; // Używane w komponentach React po stronie klienta

  const { useDictionary } = require("next-intlayer"); // Używane w komponentach React po stronie klienta

• Komponent Serwera:

  import { useDictionary } from "next-intlayer/server"; // Używane w komponentach React po stronie serwera

  import { useDictionary } from "next-intlayer/server"; // Używane w komponentach React po stronie serwera

  const { useDictionary } = require("next-intlayer/server"); // Używane w komponentach React po stronie serwera

Parametry

Hook przyjmuje dwa parametry:

1. dictionary: Zadeklarowany obiekt słownika zawierający zlokalizowane treści dla określonych kluczy.
2. locale (opcjonalny): Żądany locale. Domyślnie używany jest locale z bieżącego kontekstu, jeśli nie zostanie określony.

Słownik

Wszystkie obiekty słownika powinny być deklarowane w uporządkowanych plikach zawartości, aby zapewnić bezpieczeństwo typów i zapobiec błędom w czasie wykonywania. Instrukcje konfiguracji można znaleźć tutaj. Oto przykład deklaracji zawartości:

import { t, type Dictionary } from "intlayer";

const exampleContent = {
  key: "component-example",
  content: {
    title: t({
      en: "Client Component Example",
      fr: "Exemple de composant client",
      es: "Ejemplo de componente cliente",
    }),
    content: t({
      en: "This is the content of a client component example",
      fr: "Ceci est le contenu d'un exemple de composant client",
      es: "Este es el contenido de un ejemplo de componente cliente",
    }),
  },
} satisfies Dictionary;

export default exampleContent;

Przykład użycia w komponencie klienta React

Poniżej znajduje się przykład, jak użyć hooka useDictionary w komponencie React:

"use client";

import type { FC } from "react";
import { useDictionary } from "next-intlayer";
import clientComponentExampleContent from "./component.content";

const ClientComponentExample: FC = () => {
  const { title, content } = useDictionary(clientComponentExampleContent);

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

Przykład użycia w komponencie React Server

Jeśli używasz hooka useDictionary poza IntlayerServerProvider, locale musi być jawnie przekazane jako parametr podczas renderowania komponentu:

import type { FC } from "react";
import { useDictionary } from "next-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC = () => {
  const { content } = useDictionary(clientComponentExampleContent);

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.content}</p>
    </div>
  );
};

Uwagi dotyczące atrybutów

W przeciwieństwie do integracji wykorzystujących edytory wizualne, atrybuty takie jak buttonTitle.value nie mają tutaj zastosowania. Zamiast tego bezpośrednio odwołuj się do zlokalizowanych łańcuchów znaków zadeklarowanych w Twojej zawartości.

<button title={content.title}>{content.content}</button>

Dodatkowe wskazówki

• Bezpieczeństwo typów: Zawsze używaj Dictionary do definiowania swoich słowników, aby zapewnić bezpieczeństwo typów.
• Aktualizacje lokalizacji: Podczas aktualizacji treści upewnij się, że wszystkie lokalizacje są spójne, aby uniknąć brakujących tłumaczeń.

Niniejsza dokumentacja koncentruje się na integracji hooka useDictionary, oferując uproszczone podejście do zarządzania zlokalizowaną zawartością bez polegania na funkcjonalnościach edytora wizualnego.