https://github.com/wangtao0101/react-list-any-height

React scroll list for item with any height
https://github.com/wangtao0101/react-list-any-height

any-height list react scrolling

Last synced: 28 days ago
JSON representation

React scroll list for item with any height

• Host: GitHub
• URL: https://github.com/wangtao0101/react-list-any-height
• Owner: wangtao0101
• License: mit
• Created: 2017-08-15T01:43:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-17T02:15:22.000Z (over 7 years ago)
• Last Synced: 2024-04-15T04:38:37.542Z (9 months ago)
• Topics: any-height, list, react, scrolling
• Language: JavaScript
• Homepage: https://wangtao0101.github.io/react-list-any-height/
• Size: 1.02 MB
• Stars: 13
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-list-any-height

React scroll list for item with any height.

Example: https://wangtao0101.github.io/react-list-any-height/

## Motivation

[react virtualized](https://github.com/bvaughn/react-virtualized) and [react-infinite](https://github.com/seatgeek/react-infinite) can only handle list with fixed height, but that may not always be the case.

## Install

```

npm install react-list-any-height --save

yarn add react-list-any-height

```

## Basic Use

### Elements of Any Height

As we don't know the height of all row before the row had been rendered, we figure out the height of contianer by using minRowHeight.

```

 (

        


    )}

/>

```


## How to work

We figure out the origin height of contianer by using minRowHeight. After you scroll and the more row will be rendered, we using new heights to update component in next scrolling.

## Note on Smooth Scrolling

minRowHeight should be set reasonable, otherwise if you scroll to end fastly and then you scroll to up slowly, then page will jump.

## Api

### dataSource

the data array, isRequired

### minRowHeight

The minimum height of all rows, isRequired

### height

The height of scrolling contianer, default to 300.

### preloadBatchSize

The items rendered out of contianer, default to 5.

### style

The style of contianer, default to style: { width: '100%' }.

### rowStyle

The style of row

### rowRender

A function for rendering a row, isRequired

### timeScrollStateLastsForAfterUserScrolls(same as react-infinite)

Defaults to 150 (in milliseconds). On Apple and some other devices, scroll is inertial. This means that the window continues to scroll for several hundred milliseconds after an onScroll event is fired. To prevent janky behavior, we do not want pointer-events to reactivate before the window has finished moving. Setting this parameter causes the Infinite component to think that the user is still scrolling for the specified number of milliseconds after the last onScroll event is received.

## Thanks

Some code from [react-infinite](https://github.com/seatgeek/react-infinite)

## Roadmap

- [ ] full test

- [ ] Using the Window to Scroll