Treść Wstawiania / Wstawianie w Intlayer

Jak działa wstawianie

W Intlayer treść wstawiania jest realizowana za pomocą funkcji insertion, która identyfikuje pola zastępcze w ciągu znaków (takie jak {{name}} lub {{age}}), które mogą być dynamicznie zastępowane w czasie wykonywania. To podejście pozwala tworzyć elastyczne, szablonowe ciągi znaków, w których konkretne części treści są określane przez dane przekazywane z Twojej aplikacji.

Po integracji z React Intlayer lub Next Intlayer możesz po prostu dostarczyć obiekt danych zawierający wartości dla każdego pola zastępczego, a Intlayer automatycznie wyrenderuje treść z zastąpionymi polami.

Konfiguracja treści wstawiania

Aby skonfigurować treść wstawiania w swoim projekcie Intlayer, utwórz moduł treści, który zawiera definicje wstawek. Poniżej znajdują się przykłady w różnych formatach.

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("Cześć, mam na imię {{name}} i mam {{age}} lat!"),  },} satisfies Dictionary;export default myInsertionContent;

Używanie treści wstawianej z React Intlayer

Aby wykorzystać zawartość wstawki w komponencie React, zaimportuj i użyj hooka useIntlayer z pakietu react-intlayer. Ten hook pobiera zawartość dla określonego klucza i pozwala przekazać obiekt, który mapuje każde miejsce na wartość, którą chcesz wyświetlić.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Wynik: "Cześć, mam na imię John i mam 30 lat!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* Możesz ponownie użyć tej samej wstawki z różnymi wartościami */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

Dodatkowe zasoby

Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer

Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach i frameworkach.