react-list-any-height

    0.3.0 • Public • Published

    react-list-any-height

    React scroll list for item with any height.

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

    Motivation

    react virtualized and 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.

    <AnyHeight
        dataSource={dataSource}
        minRowHeight={100}
        rowRender={(index, style) => (
            <div className="hover-row" style={style)}></div>
        )}
    />
    

    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

    Roadmap

    • full test
    • Using the Window to Scroll

    Keywords

    none

    Install

    npm i react-list-any-height

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    none

    Last publish

    Collaborators

    • yuecjnadt