# react-tiny-virtual-grid

> react tiny virtual grid

Latest version **0.0.2** (published 2020-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tiny-virtual-grid
pnpm add react-tiny-virtual-grid
yarn add react-tiny-virtual-grid
bun add react-tiny-virtual-grid
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-03-30 |
| First published | 2020-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zhangyu1818 |
| Maintainers | zhangyu1995 |

## Links

- npm: https://www.npmjs.com/package/react-tiny-virtual-grid
- Repository: https://github.com/zhangyu1818/react-tiny-virtual-grid
- Issues: https://github.com/zhangyu1818/react-tiny-virtual-grid/issues
- npm.io page: https://npm.io/package/react-tiny-virtual-grid

## Recent versions

- 0.0.2 (latest) — 2020-03-30
- 0.0.1 — 2020-03-29

## README

# react-tiny-virtual-grid

虚拟列表 + 类似Grid布局

根据传入不同列数，调整元素位置

在此基础上可以做到当列数动态改变后，给元素的布局添加动画

![](https://tva1.sinaimg.cn/large/00831rSTgy1gdb0z24fdyg30dc073qi9.gif)

## Installation

```
    npm install react-tiny-virtual-grid
```

## Usage

```jsx
  <VirtualGrid
    dataSource={list}
    itemHeight={200}
    bufferSize={2}
    columns={columns}
  >
    {(item, [x, y], stop, index) => (
      <div
        key={index}
        style={{
          position: "absolute",
          left: `${x * 300}px`,
          top: `${y * 200}px`,
          width: 300,
          height: 200,
          transition: stop ? "all 300ms" : "unset"
        }}
      >
        {item}
      </div>
    )}
  </VirtualGrid>
```
## Props

| 属性     | 说明         | 类型                                                                                                                 | 默认值 |
| ---------- | -------------- | ---------------------------------------------------------------------------------------------------------------------- | ------ |
| dataSource | 渲染的数据 | any[]                                                                                                                  | -      |
| itemHeight | 每行元素的高度 | number                                                                                                                 | -      |
| bufferSize | 下方缓冲行数 | number                                                                                                                 | 0      |
| columns    | 列数         | number                                                                                                                 | -      |
| children   | 渲染的函数 |  (item: T,pos: [number, number],stop: boolean,index: number) => React.ReactElement | -      |

**注意**

如果要实现动画效果，需要使用Render Props的参数index作为key

目前还没有想到好的方法来实现行数增加时也能进行动画效果。如果行数为1，这时候假如显示了4个元素，将行数变为2，元素从4个变为了8个，凭空新增的元素，没法做到动画。现在解决的想法是需要渲染一个固定长度的数组，这样需要传入一个最大行数，没想到好办法

## TODO

- [ ] 完整缓冲区，防止闪屏
- [ ] 行数增加时也添加动画
- [ ] 动态元素高度

---
_Source: https://npm.io/package/react-tiny-virtual-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._