react virtuoso

React Virtuoso - A lista de renderização de virtualização mais completa do React/Table/Grid Family of Components.

• Itens de tamanho variável para fora da caixa; Não são necessárias medidas manuais ou alturas de itens de codificação rígida;
• Lista de mensagens de bate -papo ui novo ;
• Modo agrupado com cabeçalhos pegajosos;
• Layout de grade responsiva;
• Suporte da tabela;
• Manuseio automático de redimensionamento de conteúdo;
• Cabeçalho personalizado, rodapé e componentes de lista vazia;
• Itens superiores presos;
• Rolagem sem fim, pressione para carregar mais;
• Índice de itens mais inicial inicial;
• Role para o método de índice.

Para exemplos e documentação ao vivo, consulte o site da documentação.

Patrocinadores

Se você estiver usando o virtuoso para o trabalho, patrocine -o. Qualquer doação ajuda muito com o desenvolvimento e manutenção do projeto.

Comece

npm install react-virtuoso

 import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'

const App = ( ) => {
  return < Virtuoso style = { { height : '400px' } } totalCount = { 200 } itemContent = { index => < div > Item { index } </ div > } />
}

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) ) 

Lista de mensagens

O componente da lista de mensagens Virtuoso é criado especificamente para conversas humanas/chatbot. Além da renderização virtualizada, o componente expõe uma API imperativa de gerenciamento de dados que fornece o controle necessário sobre a posição de rolagem quando as mensagens mais antigas são carregadas, novas mensagens chegam e quando o usuário enviar uma mensagem. A posição de rolagem pode atualizar instantaneamente ou com uma animação de rolagem suave.

Modo agrupado

O componente GroupedVirtuoso é uma variante do Virtuoso "plana", com as seguintes diferenças:

• Em vez de totalCount , o componente expõe a propriedade groupCounts: number[] , que especifica a quantidade de itens em cada grupo. Por exemplo, a passagem [20, 30] renderizará dois grupos com 20 e 30 itens cada;
• Além da propriedade itemContent , o componente requer uma propriedade adicional groupContent , o que renderiza o cabeçalho do grupo . O retorno de chamada groupContent recebe o índice de grupo baseado em zero como um parâmetro.

Grade

O componente VirtuosoGrid exibe itens do mesmo tamanho em várias colunas. O layout e o dimensionamento dos itens são controlados por meio de propriedades da classe CSS, que permitem usar consultas de mídia, largura de minúscula, porcentagem etc.

Mesa

O componente TableVirtuoso funciona como Virtuoso , mas com tabelas HTML. Ele suporta rolagem de janelas, cabeçalhos pegajosos, colunas pegajosas e trabalha com a tabela React e a tabela MUI.

Funciona com sua biblioteca de UI de escolha

Você pode personalizar a marcação para seus requisitos - verifique a demonstração da lista de interface do usuário do material. Se você precisar apoiar a reordenação, verifique o exemplo de hoc reagt classificável.

Documentação e demos

Para uma documentação aprofundada e exemplos ao vivo dos recursos suportados e demos ao vivo, consulte o site da documentação.

Suporte do navegador

Para apoiar os navegadores herdados, você pode precisar carregar um Polyfill de RECENDIMENTO antes de usar react-virtuoso :

 import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
  window.ResizeObserver = ResizeObserver

Autor

Petyo Ivanov @petyosi.

Contribuindo

Correções e novos recursos

Para executar os testes, use npm run test . Um conjunto de testes baseado em navegador de ponta a ponta é executado com npm run e2e , com as páginas sendo e2e/*.tsx e os testes e2e/*.test.ts

Uma maneira conveniente de depurar algo é visualizar os casos de teste no navegador. Para fazer isso, execute npm run dev - ele iniciará um servidor de concha que permite navegar pelos componentes na pasta examples .

Licença

MIT Licença.