React Интеграция: Документация хука useIntlayerAsync

Хук useIntlayerAsync расширяет функциональность useIntlayer, возвращая не только предварительно отрендеренные словари, но и асинхронно загружая обновления, что делает его идеальным для приложений, которые часто обновляют локализованный контент после первоначального рендера.

Обзор

• Асинхронная загрузка словарей:
  При первом монтировании useIntlayerAsync сначала возвращает предварительно загруженный или статически встроенный словарь локали (как это делает useIntlayer), а затем асинхронно загружает и объединяет любые новые доступные удаленные словари.
• Управление состоянием загрузки:
  Хук также предоставляет состояние isLoading, указывающее, когда загружается удаленный словарь. Это позволяет разработчикам отображать индикаторы загрузки или скелетон-элементы для более плавного пользовательского опыта.

Настройка окружения

Intlayer предоставляет безголовую систему управления источниками контента (CSM), которая позволяет пользователям без навыков программирования управлять и обновлять контент приложения. Используя интуитивно понятную панель управления Intlayer, ваша команда может редактировать локализованный текст, изображения и другие ресурсы без прямого изменения кода. Это упрощает процесс управления контентом, способствует сотрудничеству и обеспечивает быстрые и легкие обновления.

Чтобы начать работу с Intlayer:

1. Зарегистрируйтесь и получите токен доступа на https://intlayer.org/dashboard.

2. Добавьте учетные данные в файл конфигурации:
   В вашем React-проекте настройте клиент Intlayer с вашими учетными данными:

   intlayer.config.ts

   import type { IntlayerConfig } from "intlayer";export default {  // ...  editor: {    clientId: process.env.INTLAYER_CLIENT_ID,    clientSecret: process.env.INTLAYER_CLIENT_SECRET,  },} satisfies IntlayerConfig;

3. Загрузите новый словарь локали в Intlayer:

   bash

   npx intlayer dictionary push -d my-first-dictionary-key

   Эта команда загружает ваши начальные словари контента, делая их доступными для асинхронной загрузки и редактирования через платформу Intlayer.

Импорт useIntlayerAsync в React

В ваших React-компонентах импортируйте useIntlayerAsync:

import { useIntlayerAsync } from "react-intlayer";

Параметры

1. key:
   Тип: DictionaryKeys
   Ключ словаря, используемый для идентификации блока локализованного контента. Этот ключ должен быть определен в ваших файлах декларации контента.

2. locale (опционально):
   Тип: Locales
   Конкретная локаль, которую вы хотите использовать. Если параметр не указан, хук использует локаль из текущего контекста Intlayer.

3. isRenderEditor (опционально, по умолчанию true):
   Тип: boolean
   Определяет, должен ли контент быть готовым для рендера с наложением редактора Intlayer. Если установлено в false, возвращаемые данные словаря будут исключать функции, специфичные для редактора.

Возвращаемое значение

Хук возвращает объект словаря, содержащий локализованный контент, связанный с key и locale. Также он включает булево значение isLoading, указывающее, загружается ли в данный момент удаленный словарь.

Пример использования в React-компоненте

import { useEffect, type FC } from "react";import { useIntlayerAsync } from "react-intlayer";export const ComponentExample: FC = () => {  const { title, description, isLoading } = useIntlayerAsync("async-component");  useEffect(() => {    if (isLoading) {      console.log("Контент загружается...");    }  }, [isLoading]);  return (    <div>      {isLoading ? (        <div>          <h1>Загрузка…</h1>          <p>Пожалуйста, подождите, пока контент обновляется.</p>        </div>      ) : (        <div>          <h1>{title.value}</h1>          <p>{description.value}</p>        </div>      )}    </div>  );};

Ключевые моменты:

• При первоначальном рендере title и description берутся из предварительно загруженного или статически встроенного словаря локали.
• Пока isLoading равно true, в фоновом режиме выполняется запрос на получение обновленного словаря.
• После завершения загрузки title и description обновляются с учетом нового контента, а isLoading возвращается в false.

Работа с локализацией атрибутов

Вы также можете получить локализованные значения атрибутов для различных HTML-свойств (например, alt, title, aria-label):

<img src={title.image.src.value} alt={title.image.alt.value} />

Файлы словарей

Все ключи контента должны быть определены в ваших файлах декларации контента для обеспечения безопасности типов и предотвращения ошибок во время выполнения. Эти файлы позволяют использовать проверку TypeScript, гарантируя, что вы всегда ссылаетесь на существующие ключи и локали.

Инструкции по настройке файлов декларации контента доступны здесь.

Дополнительная информация

• Визуальный редактор Intlayer:
  Интеграция с визуальным редактором Intlayer для управления и редактирования контента напрямую из пользовательского интерфейса. Подробнее здесь.

В заключение, useIntlayerAsync — это мощный хук React, предназначенный для улучшения пользовательского опыта и поддержания актуальности контента путем объединения предварительно отрендеренных или предварительно загруженных словарей с асинхронными обновлениями словарей. Используя isLoading и декларации контента на основе TypeScript, вы можете легко интегрировать динамический локализованный контент в свои React-приложения.