@intlayer/docs 5.7.6-canary.0 → 5.7.7

package/docs/pt/packages/react-intlayer/useIntlayerAsync.md

@@ -1,252 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: Documentação do Hook useIntlayerAsync | react-intlayer
-description: Veja como usar o hook useIntlayerAsync para o pacote react-intlayer
-keywords:
-  - useIntlayerAsync
-  - dicionário
-  - chave
-  - Intlayer
-  - Internacionalização
-  - Documentação
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-intlayer
-  - useIntlayerAsync
----
-
-# Integração React: Documentação do Hook `useIntlayerAsync`
-
-O hook `useIntlayerAsync` estende a funcionalidade do `useIntlayer` ao não apenas retornar dicionários pré-renderizados, mas também buscar atualizações de forma assíncrona, tornando-o ideal para aplicações que atualizam frequentemente seu conteúdo localizado após a renderização inicial.
-
-## Visão Geral
-
-- **Carregamento Assíncrono de Dicionários:**  
-  Na montagem inicial, o `useIntlayerAsync` primeiro retorna qualquer dicionário de localidade pré-buscado ou empacotado estaticamente (assim como o `useIntlayer` faria) e então busca e mescla de forma assíncrona quaisquer dicionários remotos recém-disponíveis.
-- **Gerenciamento do Estado de Progresso:**  
-  O hook também fornece um estado `isLoading`, indicando quando um dicionário remoto está sendo buscado. Isso permite que os desenvolvedores exibam indicadores de carregamento ou estados esqueleto para uma experiência de usuário mais suave.
-
-## Configuração do Ambiente
-
-O Intlayer fornece um sistema headless de Gerenciamento de Fonte de Conteúdo (CSM) que capacita não-desenvolvedores a gerenciar e atualizar o conteúdo da aplicação de forma fluida. Usando o painel intuitivo do Intlayer, sua equipe pode editar textos localizados, imagens e outros recursos sem modificar diretamente o código. Isso simplifica o processo de gerenciamento de conteúdo, promove a colaboração e garante que as atualizações possam ser feitas rápida e facilmente.
-
-Para começar com o Intlayer:
-
-1. **Registre-se e obtenha um token de acesso** em [https://intlayer.org/dashboard](https://intlayer.org/dashboard).
-2. **Adicione as credenciais ao seu arquivo de configuração:**  
-   No seu projeto React, configure o cliente Intlayer com suas credenciais:
-
-   ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-   import type { IntlayerConfig } from "intlayer";
-
-   export default {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   } satisfies IntlayerConfig;
-   ```
-
-   ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-   import { type IntlayerConfig } from "intlayer";
-
-   /** @type {import('intlayer').IntlayerConfig} */
-   const config = {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   };
-
-   export default config;
-   ```
-
-   ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-   /** @type {import('intlayer').IntlayerConfig} */
-   const config = {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   };
-
-   module.exports = config;
-   ```
-
-3. **Enviar um novo dicionário de localidade para o Intlayer:**
-
-   ```bash
-   npx intlayer dictionary push -d my-first-dictionary-key
-   ```
-
-   Este comando envia seus dicionários de conteúdo iniciais, tornando-os disponíveis para busca e edição assíncronas através da plataforma Intlayer.
-
-## Importando `useIntlayerAsync` no React
-
-Nos seus componentes React, importe `useIntlayerAsync`:
-
-```ts codeFormat="typescript"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="esm"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="commonjs"
-const { useIntlayerAsync } = require("react-intlayer");
-```
-
-## Parâmetros
-
-1. **`key`**:  
-   **Tipo**: `DictionaryKeys`  
-   A chave do dicionário usada para identificar o bloco de conteúdo localizado. Esta chave deve ser definida nos seus arquivos de declaração de conteúdo.
-
-2. **`locale`** (opcional):  
-   **Tipo**: `Locales`  
-   A localidade específica que você deseja direcionar. Se omitida, o hook usa a localidade do contexto atual do Intlayer.
-
-3. **`isRenderEditor`** (opcional, padrão é `true`):  
-   **Tipo**: `boolean`  
-   Determina se o conteúdo deve estar pronto para renderização com a sobreposição do editor Intlayer. Se definido como `false`, os dados do dicionário retornados excluirão recursos específicos do editor.
-
-## Valor de Retorno
-
-O hook retorna um objeto dicionário contendo o conteúdo localizado identificado por `key` e `locale`. Ele também inclui um booleano `isLoading` que indica se um dicionário remoto está atualmente sendo buscado.
-
-## Exemplo de Uso em um Componente React
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
-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("Conteúdo está carregando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Carregando…</h1>
-          <p>Por favor, aguarde enquanto o conteúdo é atualizado.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
-import { useEffect } from "react";
-import { useIntlayerAsync } from "react-intlayer";
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("O conteúdo está carregando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Carregando…</h1>
-          <p>Por favor, aguarde enquanto o conteúdo é atualizado.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
-const { useEffect } = require("react");
-const { useIntlayerAsync } = require("react-intlayer");
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Conteúdo está carregando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Carregando…</h1>
-          <p>Por favor, aguarde enquanto o conteúdo é atualizado.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-**Pontos-chave:**
-
-- Na renderização inicial, `title` e `description` vêm do dicionário de localidade pré-buscado ou embutido estaticamente.
-- Enquanto `isLoading` for `true`, uma requisição em segundo plano busca um dicionário atualizado.
-- Quando a busca é concluída, `title` e `description` são atualizados com o conteúdo mais recente, e `isLoading` retorna para `false`.
-
-## Manipulação da Localização de Atributos
-
-Você também pode recuperar valores localizados para atributos diversos do HTML (por exemplo, `alt`, `title`, `aria-label`):
-
-```jsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## Arquivos de Dicionário
-
-Todas as chaves de conteúdo devem ser definidas em seus arquivos de declaração de conteúdo para garantir segurança de tipos e evitar erros em tempo de execução. Esses arquivos permitem a validação pelo TypeScript, assegurando que você sempre referencie chaves e localidades existentes.
-
-Instruções para configurar arquivos de declaração de conteúdo estão disponíveis [aqui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/get_started.md).
-
-## Mais Informações
-
-- **Editor Visual Intlayer:**  
-  Integre com o editor visual Intlayer para gerenciar e editar conteúdo diretamente pela interface do usuário. Mais detalhes [aqui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md).
-
----
-
-**Em resumo**, `useIntlayerAsync` é um poderoso hook do React projetado para melhorar a experiência do usuário e manter o conteúdo atualizado, mesclando dicionários pré-renderizados ou pré-buscados com atualizações assíncronas de dicionários. Ao utilizar `isLoading` e declarações de conteúdo baseadas em TypeScript, você pode integrar de forma fluida conteúdo dinâmico e localizado em suas aplicações React.
-
-## Histórico do Documento
-
-- 5.5.10 - 2025-06-29: Histórico inicial

package/docs/ru/packages/next-intlayer/useIntlayerAsync.md

@@ -1,237 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: Документация по хуку useIntlayerAsync | next-intlayer
-description: Узнайте, как использовать хук useIntlayerAsync для пакета next-intlayer
-keywords:
-  - useIntlayerAsync
-  - словарь
-  - ключ
-  - Intlayer
-  - Интернационализация
-  - Документация
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - next-intlayer
-  - useIntlayerAsync
----
-
-# Интеграция с Next.js: Документация по хуку `useIntlayerAsync`
-
-Хук `useIntlayerAsync` расширяет функциональность `useIntlayer`, возвращая не только предварительно отрендеренные словари, но и асинхронно загружая обновления, что делает его идеальным для приложений, которые часто обновляют локализованный контент после первоначального рендера.
-
-## Обзор
-
-- **Асинхронная загрузка словарей:**  
-  На стороне клиента `useIntlayerAsync` сначала возвращает предварительно отрендеренный словарь локали (так же, как и `useIntlayer`), а затем асинхронно загружает и объединяет любые новые доступные удалённые словари.
-- **Управление состоянием загрузки:**  
-  Хук также предоставляет состояние `isLoading`, которое указывает, когда происходит загрузка удалённого словаря. Это позволяет разработчикам отображать индикаторы загрузки или скелетоны для более плавного пользовательского опыта.
-
-## Настройка окружения
-
-Intlayer предоставляет безголовую систему управления источниками контента (CSM), которая позволяет неразработчикам легко управлять и обновлять содержимое приложения. Используя интуитивно понятную панель управления Intlayer, ваша команда может редактировать локализованные тексты, изображения и другие ресурсы без прямого изменения кода. Это упрощает процесс управления контентом, способствует сотрудничеству и обеспечивает возможность быстрого и лёгкого внесения обновлений.
-
-Чтобы начать работу с Intlayer, вам сначала нужно зарегистрироваться и получить токен доступа на [панели управления](https://intlayer.org/dashboard). После получения учетных данных добавьте их в файл конфигурации, как показано ниже:
-
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import type { IntlayerConfig } from "intlayer";
-
-export default {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-} satisfies IntlayerConfig;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { type IntlayerConfig } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-};
-
-module.exports = config;
-```
-
-После настройки ваших учетных данных вы можете загрузить новый словарь локали в Intlayer, выполнив команду:
-
-```bash
-npx intlayer dictionary push -d my-first-dictionary-key
-```
-
-Эта команда загружает ваши начальные словари контента, делая их доступными для асинхронного получения и редактирования через платформу Intlayer.
-
-## Импорт `useIntlayerAsync` в Next.js
-
-Поскольку `useIntlayerAsync` предназначен для **клиентских** компонентов, импортируйте его из той же клиентской точки входа, что и `useIntlayer`:
-
-```tsx codeFormat="typescript"
-"use client";
-
-import { useIntlayerAsync } from "next-intlayer";
-```
-
-```javascript codeFormat="esm"
-"use client";
-
-import { useIntlayerAsync } from "next-intlayer";
-```
-
-```javascript codeFormat="commonjs"
-"use client";
-
-const { useIntlayerAsync } = require("next-intlayer");
-```
-
-Убедитесь, что импортируемый файл аннотирован директивой `"use client"` в начале, если вы используете Next.js App Router с разделением серверных и клиентских компонентов.
-
-## Параметры
-
-1. **`key`**:  
-   **Тип**: `DictionaryKeys`  
-   Ключ словаря, используемый для идентификации блока локализованного контента. Этот ключ должен быть определён в ваших файлах декларации контента.
-
-2. **`locale`** (необязательно):  
-   **Тип**: `Locales`  
-   Конкретная локаль, на которую вы хотите ориентироваться. Если не указано, хук использует локаль из клиентского контекста.
-
-3. **`isRenderEditor`** (необязательно, по умолчанию `true`):  
-   **Тип**: `boolean`  
-   Определяет, должен ли контент быть готовым для рендеринга с наложением редактора Intlayer. Если установлено в `false`, возвращаемые данные словаря не будут содержать функции, специфичные для редактора.
-
-## Возвращаемое значение
-
-Хук возвращает объект словаря, содержащий локализованный контент, ключи которого — `key` и `locale`. Также он включает булевое значение `isLoading`, указывающее, загружается ли в данный момент удалённый словарь.
-
-## Пример использования в Next.js
-
-### Пример клиентского компонента
-
-```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
-"use client";
-
-import { useEffect, type FC } from "react";
-import { useIntlayerAsync } from "next-intlayer";
-
-export const AsyncClientComponentExample: FC = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Контент загружается...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
-"use client";
-
-import { useEffect } from "react";
-import { useIntlayerAsync } from "next-intlayer";
-
-const AsyncClientComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Контент загружается...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
-"use client";
-
-const { useEffect } = require("react");
-const { useIntlayerAsync } = require("next-intlayer");
-
-const AsyncClientComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Контент загружается...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-**Ключевые моменты:**
-
-- При первоначальном рендеринге `title` и `description` берутся из предварительно отрендеренного словаря локали.
-- Пока `isLoading` равно `true`, в фоновом режиме выполняется удалённый запрос для получения обновлённого словаря.
-- После завершения запроса `title` и `description` обновляются с новым содержимым, а `isLoading` возвращается к значению `false`.
-
-## Обработка локализации атрибутов
-
-Как и с `useIntlayer`, вы можете получать локализованные значения атрибутов для различных HTML-свойств (например, `alt`, `title`, `aria-label`):
-
-```tsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## Файлы словарей
-
-Все ключи контента должны быть определены в ваших файлах деклараций контента для обеспечения типовой безопасности и предотвращения ошибок во время выполнения. Эти файлы позволяют TypeScript выполнять проверку, гарантируя, что вы всегда ссылаетесь на существующие ключи и локали.
-
-Инструкции по настройке файлов декларации контента доступны [здесь](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/get_started.md).
-
-## Дополнительная информация
-
-- **Визуальный редактор Intlayer:**  
-  Интеграция с визуальным редактором Intlayer для управления и редактирования контента непосредственно из пользовательского интерфейса. Подробнее [здесь](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md).
-
----
-
-В итоге, `useIntlayerAsync` — это мощный клиентский хук, предназначенный для улучшения пользовательского опыта и поддержания актуальности контента за счёт объединения предварительно отрендеренных словарей с асинхронными обновлениями словарей. Используя `isLoading` и декларации контента на основе TypeScript, вы можете бесшовно интегрировать динамический, локализованный контент в ваши приложения Next.js.
-
-## История документации
-
-- 5.5.10 - 2025-06-29: Инициализация истории