Integración de React: Documentación del Hook useIntlayerAsync

El hook useIntlayerAsync extiende la funcionalidad de useIntlayer al no solo devolver diccionarios pre-renderizados, sino también al obtener actualizaciones de manera asíncrona, lo que lo hace ideal para aplicaciones que actualizan frecuentemente su contenido localizado después del renderizado inicial.

Descripción General

Carga Asíncrona de Diccionarios:
En la primera carga, useIntlayerAsync primero devuelve cualquier diccionario de locale pre-obtenido o empaquetado de forma estática (tal como lo haría useIntlayer) y luego obtiene y fusiona asíncronamente cualquier nuevo diccionario remoto disponible.
Gestión del Estado de Progreso:
El hook también proporciona un estado isLoading, que indica cuándo se está obteniendo un diccionario remoto. Esto permite a los desarrolladores mostrar indicadores de carga o estados de esqueleto para una experiencia de usuario más fluida.

Configuración del Entorno

Intlayer proporciona un sistema de Gestión de Fuente de Contenidos (CSM) sin cabezas que permite a los no desarrolladores gestionar y actualizar el contenido de la aplicación sin problemas. Al usar el panel intuitivo de Intlayer, tu equipo puede editar texto localizado, imágenes y otros recursos sin modificar el código directamente. Esto agiliza el proceso de gestión de contenido, fomenta la colaboración y garantiza que las actualizaciones se puedan realizar de manera rápida y sencilla.

Para empezar con Intlayer:

Regístrate y obtén un token de acceso en /ru/dashboard.
Agrega credenciales a tu archivo de configuración:
En tu proyecto de React, configura el cliente de Intlayer con tus credenciales:
typescript
1import { type IntlayerConfig } from 'intlayer'; 2 3export default { 4 ... 5 editor: { 6 clientId: process.env.INTLAYER_CLIENT_ID, 7 clientSecret: process.env.INTLAYER_CLIENT_SECRET, 8 }, 9} satisfies IntlayerConfig
Envía un nuevo diccionario de locale a Intlayer:
bash
1npm intlayer push -d my-first-dictionary-key

Este comando sube tus diccionarios de contenido iniciales, haciéndolos disponibles para la carga y edición asíncronas a través de la plataforma Intlayer.

Importando useIntlayerAsync en React

En tus componentes de React, importa useIntlayerAsync:

tsx

1import { useIntlayerAsync } from "react-intlayer";

Parámetros

key:
Tipo: DictionaryKeys
La clave del diccionario utilizada para identificar el bloque de contenido localizado. Esta clave debe estar definida en tus archivos de declaración de contenido.
locale (opcional):
Tipo: Locales
El locale específico que deseas apuntar. Si se omite, el hook usa el locale del contexto actual de Intlayer.
isRenderEditor (opcional, por defecto true):
Tipo: boolean
Determina si el contenido debe estar listo para renderizar con la superposición del editor de Intlayer. Si se establece en false, los datos del diccionario devuelto excluirán características específicas del editor.

Valor de Retorno

El hook devuelve un objeto de diccionario que contiene contenido localizado indexado por key y locale. También incluye un booleano isLoading que indica si se está obteniendo actualmente un diccionario remoto.

Ejemplo de Uso en un Componente de React

tsx

1import { useEffect } from "react";
2import { useIntlayerAsync } from "react-intlayer";
3
4export const AsyncClientComponentExample = () => {
5  const { title, description, isLoading } = useIntlayerAsync("async-component");
6
7  useEffect(() => {
8    if (isLoading) {
9      console.log("El contenido se está cargando...");
10    }
11  }, [isLoading]);
12
13  return (
14    <div>
15      {isLoading ? (
16        <div>
17          <h1>Cargando…</h1>
18          <p>Por favor, espera mientras se actualiza el contenido.</p>
19        </div>
20      ) : (
21        <div>
22          <h1>{title.value}</h1>
23          <p>{description.value}</p>
24        </div>
25      )}
26    </div>
27  );
28};

Puntos Clave:

En el renderizado inicial, title y description provienen del diccionario de locale pre-obtenido o incrustado de forma estática.
Mientras isLoading es true, se realiza una solicitud en segundo plano para obtener un diccionario actualizado.
Una vez que se completa la obtención, title y description se actualizan con el contenido más reciente, y isLoading vuelve a false.

Manejo de la Localización de Atributos

También puedes recuperar valores de atributos localizados para varias propiedades HTML (por ejemplo, alt, title, aria-label):

tsx

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

Archivos de Declaración de Contenido

Todas las claves de contenido deben estar definidas en tus archivos de declaración de contenido para garantizar la seguridad de tipos y prevenir errores en tiempo de ejecución. Estos archivos permiten la validación por TypeScript, asegurando que siempre hagas referencia a claves y locales existentes.

Instrucciones para configurar archivos de declaración de contenido están disponibles aquí.

Más Información

Editor Visual de Intlayer:
Integra con el editor visual de Intlayer para gestionar y editar contenido directamente desde la interfaz. Más detalles aquí.

En resumen, useIntlayerAsync es un poderoso hook de React diseñado para mejorar la experiencia del usuario y mantener la frescura del contenido al fusionar diccionarios pre-renderizados o pre-obtenidos con actualizaciones de diccionarios asíncronas. Al aprovechar isLoading y las declaraciones de contenido basadas en TypeScript, puedes integrar sin problemas contenido localizado y dinámico en tus aplicaciones de React.

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

useIntlayer useDictionary