Ignite UI for React 19.5.1: ¿Qué hay de nuevo?
Desde Grid PDF Export, que te permite exportar datos de IgrGrid, IgrTreeGrid, IgrHierarchicalGrid e IgrPivotGrid a una nueva canalización de renderizado internacional y más. Aquí tienes las últimas novedades en tu caja de herramientas.
Radoslav Mirchev
6min read
Ignite UI for React 19.5.1 ya está disponible en NPM. Esta versión ofrece las habilidades de agente LLM integradas directamente en el paquete, exportación en PDF para todas las variantes de cuadrícula, una revisión completa del i18n con una nueva API de localización pública, mejoras en el rendimiento del desplazamiento dinámico y soporte nativo de la API Popover para desplegables y diálogos.
Todas las actualizaciones de Ignite UI for React 19.5.1 de un vistazo:
- Habilidades de agentes LLM: 3 archivos de habilidades específicos de React vienen dentro del paquete npm, proporcionando a GitHub Copilot y a otros agentes LLM orientación paso a paso para tareas comunes
- Grid PDF Export: export data from IgrGrid, IgrTreeGrid, IgrHierarchicalGrid, and IgrPivotGrid to PDF
- Rendimiento de desplazamiento en cuadrícula: el ajuste dinámico de aceleración basado en datos renderizados reduce las ineficiencias en grandes conjuntos de datos
- API Popover: los menús desplegables y los diálogos ahora utilizan la API HTML Popover para un mejor posicionamiento y accesibilidad
- i18n Overhaul: nueva canalización de renderizado basada en Intl, localización actualizada para todos los idiomas soportados y un nuevo
igniteui-i18n-resourcespaquete con una API pública - Breaking break: prefijos de propiedades personalizadas CSS renombrados; la detección de mutaciones en la matriz de cuadrícula cambió; API de ranura de chat actualizada; Descripción
disableArrowemergente eliminada; Node.js ≥ 22 requeridas
npm install igniteui-react@19.5.1 npm install igniteui-react-grids@19.5.1
Accede al registro completo de cambios aquí.
LLM Agent Skills
Actualmente, tres Habilidades de Agente LLM se envían dentro deligniteui-react paquete npm bajo elskills/ directorio, enseñando a GitHub Copilot, Cursor, Windsurf, Claude Code y otros agentes impulsados por LLM los componentes correctosIgr*, rutas de importación, patrones JSX y enfoques de estilismo — todos específicos para React y laigniteui-react familia de paquetes.
Cada habilidad es un archivo markdown autónomo con instrucciones paso a paso, ejemplos de código y unreference/ subdirectorio de material de apoyo. Haz que se conecten a tu agente una vez por proyecto y cada sesión sigue tus estándares automáticamente.
| Skill | Lo que cubre | Uso cuando |
|---|---|---|
igniteui-react-components | Identifica el componente adecuadoIgr* para un patrón de interfaz, luego instala, importa y úsalo — patrones JSX, eventos, referencias, formularios | Elegir componentes o montarlos y usarlos en React |
igniteui-react-customize-theme | Personaliza el estilo usando propiedades personalizadas de CSS, Sass y el sistema de tematización Ignite UI en un contexto React | Applying custom brand colors or styles |
igniteui-react-optimize-bundle-size | Reduce bundle size with granular imports, tree-shaking, and lazy loading | Optimizing production performance |
Incorporando las habilidades a tu IDE
Las habilidades ya están en disco una vez instalado el paquete. Cópialos en la ruta de descubrimiento de tu agente — la estructura es independiente del agente, así que cualquier asistente que soporte archivos de habilidades puede usarlos directamente.
# macOS / Linux / Windows (PowerShell) - installed npm package cp -r node_modules/igniteui-react/skills/. .agents/skills/ # Use the npx skills CLI npx skills add IgniteUI/igniteui-react # GitHub Copilot — copy into .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/ # Claude Code — copy into .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-components .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .claude/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .claude/skills/
Para Cursor, Windsurf y otros agentes, consulta la documentación de tu agente para encontrar la ruta correcta en el directorio de habilidades: los archivos de habilidades funcionan con cualquier asistente que soporte carga de contexto basada en habilidades.
View LLM Agent Skills documentation →
Grid PDF Export
Las cuatro variantes de cuadrícula —IgrGrid,IgrTreeGrid,IgrHierarchicalGrid, yIgrPivotGrid— ahora soportan exportar datos directamente a PDF. La exportación en PDF se une a la pipeline de exportación existente de Excel, proporcionando a las aplicaciones un camino nativo hacia documentos imprimibles y compartibles sin necesidad de un paso de renderizado en el lado del servidor. La función está disponible a través deligniteui-react-grids paquete e integra con la infraestructura existente de la barra de herramientas.
import { IgrGridToolbarExporter } from 'igniteui-react-grids';
// In your toolbar, PDF export is available alongside Excel export
View Grid PDF Export documentation
Grid Scroll Performance
IgrGrid,IgrTreeGrid,IgrHierarchicalGrid, yIgrPivotGrid recibió un conjunto objetivo de seis optimizaciones de renderizado y detección de cambios en la versión 7.0. El resultado combinado en un conjunto de datos de 100.000 filas con 100 operaciones de desplazamiento: ~40–55 FPS frente a ~15–25 FPS antes (mejora del 100–150%), y el tiempo total de bloqueo se redujo de ~8–12 segundos a ~3–5 segundos (reducción del 50–60%).
El impacto agregado medido en el hardware evaluado (100.000 filas, 100 operaciones de desplazamiento):
| Metric | Antes | Después | Delta |
|---|---|---|---|
| Long Tasks Count | ~80–120 | ~30–50 | −50% a −60% |
| Avg Long Task Duration | ~80–120ms | ~55–75ms | −30% a −40% |
| Total Blocking Time | ~8–12 sec | ~3–5 sec | −50% a −60% |
| Frames per second | ~15–25 fps | ~40–55 fps | +100% a +150% |
View Grid Virtualization documentation
API popover para desplegables y diálogos
Los menús desplegables y los diálogos ahora utilizan la API HTML Popover nativa del navegador en lugar de la lógica de posicionamiento superpuesta personalizada. La API de Popover posiciona elementos flotantes en la capa superior, resolviendo problemas de apilamiento de índices z de larga data en diseños complejos y eliminando el clipping dentro de contenedores ocultos en desbordamiento. La accesibilidad mejora como efecto secundario: la gestión de enfoques y el comportamiento de descarte se alinean con las expectativas nativas del navegador en lugar de con implementaciones personalizadas. Este cambio es transparente, sin necesidad de cambios en la superficie de la API ni migración.
i18n Overhaul and New igniteui-i18n-resources Package
Los componentes de la cuadrícula que generan fechas y números ahora utilizan una canalización nativaIntl, y las implementaciones de Calendar, DatePicker y DateRangePicker se han actualizado para coincidir. Una nueva API pública de localización acompaña al cambio de motor, junto con un paquete separadoigniteui-i18n-resources que contiene cadenas de recursos para todos los idiomas actualmente soportados. Las aplicaciones que consumen cadenas de recursos personalizadas deberán migrar al nuevo paquete y API. Consulta la guía de migración enlazada más abajo. Los componentes Combo, Chip, Entrada, Árbol y Carrusel también están cubiertos en la nueva implementación de localización.
npm install igniteui-i18n-resources@19.5.1
View Localization documentation
Breaking Changes & Migration
CSS Custom Property Prefix Rename (Themes)
Afectados: Todos los componentes que usan propiedades personalizadas CSS para la tematización
Qué cambió: Los prefijos de propiedades personalizadas globales CSS han sido renombrados para alinearse con otras bibliotecas Ignite UI. Las propiedades que usan el prefijo[OLD_PREFIX] antiguo deben actualizarse[NEW_PREFIX].
Migración: Encuentra y sustituye todas las referencias personalizadas de propiedades en tus hojas de estilo. Una lista completa de propiedades renombradas está disponible en la guía de migración.
Ver guía de migración
Eliminación de la detección de mutaciones en matriz de rejilla
Afectado:IgrGrid,IgrTreeGrid,IgrHierarchicalGrid,QuéIgrPivotGrid cambió: Las mutaciones directas en el array limitadodata (push, splice, asignación de índice) ya no activan automáticamente una re-renderización.
Migración: Sustituye las mutaciones in situ por una nueva referencia de array — por ejemplo,setData([...data, newRow]) en lugar dedata.push(newRow). Esto se alinea con los patrones estándar de inmutabilidad React y es el cambio de comportamiento de mayor impacto en esta versión.
Ver guía de migración
Chat:typingIndicator renderizador de plantillas eliminado
Afectado:IgrChat Qué cambió: LatypingIndicator prop del renderizador de plantilla ha sido eliminada.
Migración: Utiliza eltyping-indicatoren su lugar.
Tooltip: disableArrow Removed
Afectado:IgrTooltip Qué cambió: La propiedad que antes estabadisableArrow obsoleta ha sido eliminada.
Migración: Elimina cualquier referencia adisableArrow desde el uso de tooltip; la propiedad no tuvo reemplazo.
Node.js Minimum Version: ≥ 22
Afectados: Entornos de construcción y pipelines de CI
Qué cambió: El mínimo requerido Node.js versión ahora es 22.
Migración: Actualiza tu tiempo de ejecución Node.js antes de actualizar. Comprueba la configuración de tu pipeline de CI, las imágenes base de Docker y la cadena de herramientas local.
¿Cómo instalar Ignite UI for React 19.5.1?
# Core package npm install igniteui-react@19.5.1 # Grids package (required for all grid components) npm install igniteui-react-grids@19.5.1 # New: localization resources package npm install igniteui-i18n-resources@19.5.1
Empieza con Ignite UI for React 19.5.1
Actualiza tu proyecto hoy mismo y sigue la guía de inicio para acceder a AI Copilot Skills, Grid PDF Export y la nueva API i18n, y revisa la guía de migración antes de actualizar si usas enlace de datos de cuadrícula, el componente Chat o propiedades personalizadas CSS para la tematización.
