Repolode
Enviar
bvaughn

bvaughn/react-window

Componentes de React para mostrar listas grandes y datos tabulares de forma eficiente, montando solo las filas y celdas visibles.

Ver en GitHubSitio web
Estrellas
17,199
Forks
815
Issues abiertos
0
Último commit
hace 4 horas

¿Qué es?

react-window es una biblioteca de componentes de React para mostrar listas y cuadrículas largas sin la ralentización que se produce al renderizar miles de nodos del DOM a la vez. Ofrece un componente List para datos organizados en filas y un componente Grid para datos distribuidos en filas y columnas. Solo renderiza los elementos dentro del área visible, más un margen configurable de elementos adicionales.

Ambos componentes reciben un componente que renderiza filas o celdas y una cantidad de elementos, además de props opcionales para definir tamaños fijos o dinámicos, dimensiones basadas en porcentajes, claves personalizadas y la posición del desplazamiento. El desplazamiento puede controlarse desde el contenedor del propio componente, desde un elemento ancestro o desde la ventana; además, una ref imperativa expone métodos para desplazarse. El paquete de npm incluye definiciones de TypeScript.

La biblioteca se instala desde npm y está pensada para desarrolladores de React que necesitan mostrar grandes conjuntos de datos en el navegador. La documentación completa y las preguntas frecuentes están disponibles en el sitio web del proyecto.

Funciones clave

  • 01Renderiza solo las filas o celdas visibles y mantiene pequeño el tamaño del DOM incluso con grandes conjuntos de datos
  • 02Ofrece List para datos organizados en filas y Grid para datos tabulares bidimensionales
  • 03Admite alturas de fila y anchos de columna fijos, basados en porcentajes o calculados mediante funciones
  • 04Permite medir dinámicamente la altura de las filas mediante un hook
  • 05Permite desplazarse con la ventana o un elemento ancestro a través de scrollElement
  • 06Incluye una API de ref imperativa para desplazarse y tipos de TypeScript

Casos de uso

  • Mostrar mensajes de chat, registros o feeds con miles de entradas en una aplicación de React
  • Crear tablas de datos o cuadrículas similares a hojas de cálculo en un panel web
  • Mostrar listas largas de opciones en menús desplegables o selectores sin retrasos
  • Incrustar una lista virtualizada en una página que se desplaza con la ventana

Inicio rápido

  1. 1

    Instala la biblioteca desde NPM

    npm install react-window
  2. 2

    Las definiciones de TypeScript están incluidas en la carpeta dist publicada; consulta el sitio de documentación para saber cómo usarlas

Antes de usarlo

  • Según el README, las alturas de fila dinámicas son menos eficientes que los tamaños predeterminados.

Temas

#react#virtualization#list#grid#performance#typescript#ui-components

Preguntas frecuentes

¿Qué es react-window?
Componentes de React para mostrar listas grandes y datos tabulares de forma eficiente, montando solo las filas y celdas visibles. react-window es una biblioteca de componentes de React para mostrar listas y cuadrículas largas sin la ralentización que se produce al renderizar miles de nodos del DOM a la vez. Ofrece un componente List para datos organizados en filas y un componente Grid para datos distribuidos en filas y columnas. Solo renderiza los elementos dentro del área visible, más un margen configurable de elementos adicionales.
¿react-window es gratuito? ¿Qué licencia tiene?
react-window es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-window sigue mantenido?
Mantenimiento activo. El último commit de react-window fue el 22 oct 2026.
¿Para qué puedo usar react-window?
Mostrar mensajes de chat, registros o feeds con miles de entradas en una aplicación de React Crear tablas de datos o cuadrículas similares a hojas de cálculo en un panel web Mostrar listas largas de opciones en menús desplegables o selectores sin retrasos Incrustar una lista virtualizada en una página que se desplaza con la ventana
¿Cómo se instala react-window?
Instala la biblioteca desde NPM: npm install react-window Las definiciones de TypeScript están incluidas en la carpeta dist publicada; consulta el sitio de documentación para saber cómo usarlas
¿Dónde consigo react-window?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/bvaughn/react-window

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados