https://github.com/minuukang/react-easy-virtualized
💄 Easy way to use react-virtualized with automatically update cache by resize, prepend items!
https://github.com/minuukang/react-easy-virtualized
react react-virtualized resize-observer
Last synced: 5 months ago
JSON representation
💄 Easy way to use react-virtualized with automatically update cache by resize, prepend items!
- Host: GitHub
- URL: https://github.com/minuukang/react-easy-virtualized
- Owner: minuukang
- Created: 2021-04-03T09:11:24.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-09-14T11:51:54.000Z (over 3 years ago)
- Last Synced: 2025-10-09T09:13:57.476Z (5 months ago)
- Topics: react, react-virtualized, resize-observer
- Language: TypeScript
- Homepage:
- Size: 81.1 KB
- Stars: 26
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-easy-virtualized
This package is easy way to use [react-virtualized](https://github.com/bvaughn/react-virtualized) (built in `WindowScroller`, `AutoSizer`, `List` and optional of `InfiniteLoader`). and use `ResizeObserver` to automatically update cache of `CellMeasurerCache`. (If you want to support IE, please add `ResizeObserver` polyfill)
```bash
npm i react-easy-virtualized --save
```
## Comparison of react-virtualized
Manually use of `react-virtualized` package example.
```tsx
import { AutoSizer, List, WindowScroller, InfiniteLoader, CellMeasurerCache, ListRowRenderer, CellMeasurer } from 'react-virtualized';
const cache = new CellMeasurerCache();
type Props = {
data: AnyData[];
loadMore(): Promise;
hasMore: boolean;
};
function App ({ data, loadMore, hasMore }: Props) {
const rowCount = data.length + (hasMore ? 1 : 0);
const isRowLoaded = ({ index }: { index: number }) => {
return !hasMore || index < data.length;
};
const rowRenderer: ListRowRenderer = params => {
const item = isRowLoaded(params)
?
:
Loading...;
return (
{item}
);
};
return (
{({ height, isScrolling, onChildScroll, scrollTop }) => (
{({ width }) =>
{({ onRowRendered, registerChild }) => (
)
}
)}
);
}
```
... it's to long and hard to understanding rendering. try to use `react-easy-virtualized` !
```tsx
import EasyVirtualized from 'react-easy-virtualized';
type Props = {
data: AnyData[];
loadMore(): Promise;
hasMore: boolean;
};
function App ({ data, loadMore, hasMore }: Props) {
return (
Loading...}
>
{data.map(item => (
)}
);
};
```
Just give a childrens with `key`! Isn't it short and easy to understand? Let's go!
## Features
```ts
type Props = {
// Want to detect parent overflow auto|scroll element. default is false (using window scroll)
useParentScrollElement?: boolean;
// Want to control overscan row count. default is 10 (Doc: https://github.com/bvaughn/react-virtualized/blob/master/docs/overscanUsage.md)
overscanRowCount?: number;
// InfiniteScroll options
// pass `onLoadMore` and `hasMore` to enable infiniteScroll option
onLoadMore?: () => Promise;
hasMore?: boolean;
scrollReverse?: boolean; // if you want to use reverse scroll
loader?: React.ReactElement;
};
```
* Automatically update cache when prepended item, deleted item, resize item dom
* If resize item is outside from overscan area, will be automatically update cache when stop scroll after 3 seconds
* If you want to manually control cache, pass to ref to `EasyVirtualized` and using `updateCache()`
```tsx
import { useRef, Key } from 'react';
import EasyVirtualized, { EasyVirtualizedScrollerRef } from 'react-easy-virtualized';
function App () {
const scrollerRef = useRef(null);
function updateItem ({ key, index }: { key?: Key; index?: number }) {
// you can update the cache by index or key.
scrollerRef.current.updateCache({
key,
index
});
}
return
}
```
## Author
[minuukang](https://www.github.com/minuukang)