React Integration: useIntlayerAsync Hook Документация

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

Обзор

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

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

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

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

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

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

   typescript

   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

   npm intlayer 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 } from "react";
import { useIntlayerAsync } from "react-intlayer";

export const AsyncClientComponentExample = () => {
  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.