Repolode
Enviar
bvaughn

bvaughn/react-window

Componentes React para renderizar listas grandes e dados tabulares com eficiência, montando apenas as linhas e células visíveis.

Ver no GitHubSite
Estrelas
17,199
Forks
815
Issues abertas
0
Último commit
há 4 horas

O que é?

react-window é uma biblioteca de componentes React para exibir listas longas e grades sem a lentidão causada pela renderização simultânea de milhares de nós DOM. Ela oferece um componente List para dados organizados em linhas e um componente Grid para dados dispostos em linhas e colunas, renderizando apenas os itens dentro da área visível, além de uma margem configurável de overscan.

Os dois componentes recebem um componente renderizador de linhas ou células e uma quantidade de itens, além de props opcionais para tamanhos fixos ou dinâmicos, dimensões baseadas em porcentagem, chaves personalizadas e posicionamento da rolagem. A rolagem pode ser controlada pelo próprio contêiner do componente, por um elemento ancestral ou pela janela, e uma ref imperativa disponibiliza métodos de rolagem. As definições TypeScript vêm incluídas no pacote npm.

A biblioteca é instalada pelo npm e foi criada para desenvolvedores React que precisam renderizar grandes conjuntos de dados no navegador. A documentação completa e as perguntas frequentes estão no site do projeto.

Recursos principais

  • 01Renderiza apenas as linhas ou células visíveis, mantendo pequeno o tamanho do DOM em conjuntos de dados grandes
  • 02Oferece List para dados em linhas e Grid para dados tabulares bidimensionais
  • 03Dá suporte a alturas de linha e larguras de coluna fixas, percentuais ou definidas por função
  • 04Permite medir a altura dinâmica das linhas por meio de um hook
  • 05Pode rolar junto com a janela ou com um elemento ancestral usando scrollElement
  • 06Inclui uma API de ref imperativa para rolagem e tipos TypeScript

Casos de uso

  • Renderizar mensagens de chat, logs ou feeds com milhares de entradas em um app React
  • Criar tabelas de dados ou grades no estilo de planilhas em um dashboard web
  • Exibir listas longas de opções em dropdowns ou selects sem travamentos
  • Incorporar uma lista virtualizada em uma página que rola junto com a janela

Início rápido

  1. 1

    Instale a biblioteca pelo NPM

    npm install react-window
  2. 2

    As definições de TypeScript estão incluídas na pasta dist publicada; consulte o site da documentação para saber como usá-las

Antes de usar

  • De acordo com o README, alturas dinâmicas de linha são menos eficientes do que tamanhos predefinidos.

Tópicos

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

Perguntas frequentes

O que é react-window?
Componentes React para renderizar listas grandes e dados tabulares com eficiência, montando apenas as linhas e células visíveis. react-window é uma biblioteca de componentes React para exibir listas longas e grades sem a lentidão causada pela renderização simultânea de milhares de nós DOM. Ela oferece um componente List para dados organizados em linhas e um componente Grid para dados dispostos em linhas e colunas, renderizando apenas os itens dentro da área visível, além de uma margem configurável de overscan.
react-window é gratuito? Qual é a licença?
react-window é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-window ainda é mantido?
Manutenção ativa. O último commit de react-window foi em 22 de out. de 2026.
Para que posso usar react-window?
Renderizar mensagens de chat, logs ou feeds com milhares de entradas em um app React Criar tabelas de dados ou grades no estilo de planilhas em um dashboard web Exibir listas longas de opções em dropdowns ou selects sem travamentos Incorporar uma lista virtualizada em uma página que rola junto com a janela
Como instalar react-window?
Instale a biblioteca pelo NPM: npm install react-window As definições de TypeScript estão incluídas na pasta dist publicada; consulte o site da documentação para saber como usá-las
Onde consigo react-window?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/bvaughn/react-window

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados