https://github.com/mysteryven/react-virtual-list
A virtual list for React based Intersection API
https://github.com/mysteryven/react-virtual-list
Last synced: 2 months ago
JSON representation
A virtual list for React based Intersection API
- Host: GitHub
- URL: https://github.com/mysteryven/react-virtual-list
- Owner: mysteryven
- Created: 2022-07-17T12:10:44.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T05:53:12.000Z (over 1 year ago)
- Last Synced: 2025-03-28T17:19:50.920Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 203 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Virtual-List
[](https://npm.im/react-predict-virtual)
[](https://npm.im/react-predict-virtual)
> A React Virtual List for dynamic item height based Intersection API
## Install
```bash
pnpm i react-predict-virtual
```
## Preview
[preview](https://stackblitz.com/edit/vitejs-vite-gqqgju?file=package.json)
```bash
pnpm example
```
## Build
```bash
pnpm build
```
## Usage
| props | description | type |
|----|----| --- |
| `itemCount` | required，the count of items| `number`|
| `itemHeight` | required，the min height of item| `number`|
| `dividedAreaNum` | The default is 10, which indicates how many blocks the data in each layer is divided into | `number` |
| `useDynamicHeight` | Not required, default `false`, whether to use dynamic height calculation | `boolean` |
| `factors` | This field is not required. It is used to describe the eigenvector of the data | `number[]` |
| `version` | If 'factors' has changed, you can change this if you want to reset the database | `number` |
## Example
### with fixed height
```ts
{
(props: any) =>
{props.index}
}
```
### with dynamic height
```ts
import VirtualList, { ChildItemProps } from 'react-predict-virtual'
import PredictWorker from './worker?worker&inline'
const createPredictWorker = () => new PredictWorker()
const arrayLength = 1000
const originalList = new Array(arrayLength).fill(0).map(i => {
return {
memo: str.slice(Math.floor(Math.random() * str.length)),
images: new Array(Math.floor(Math.random() * 12)).fill(0)
}
})
function App() {
const factors = originalList.map(i => {
return [i.memo.length, i.images.length]
})
return (
{
(props: ChildItemProps) =>
}
)
}
```
```ts
// filename worker.ts
import { exportWorker } from "use-worker-async";
import { beginPredict } from "../../src/predictHeight/worker";
exportWorker(beginPredict)
```