0.0.8 • Published 5 years ago

react-simple-infinite-scroller v0.0.8

Weekly downloads
9
License
MIT
Repository
github
Last release
5 years ago

react-simple-infinite-scroller

CI

Installation

npm install react-simple-infinite-scroller

Usage

Infinite Scrolldown

import SimpleInfiniteScroller from 'react-simple-scroller';

export const ScrolldownList = () => {
    const [data, setData] = useState<string[]>([]);
    const [hasMore, setHasMore] = useState<boolean>(false);
    const loadMore = () => {
        // call some API to fetch next data.
    }
    return (
        <SimpleInfiniteScroller
            canScrollDown={hasMore}
            loadMore={loadMore}
        >
            <ul style={{ overflowY : 'auto', height : '70vh'}}>
                {data.map(v => (
                    <li key={v}>{v}</li>
                ))}
            </ul>
        </SimpleInfiniteScroller>
    )
}

Infinite Scrollup

import SimpleInfiniteScroller from 'react-simple-scroller';

export const ScrollupList = () => {
    const [data, setData] = useState<string[]>([]);
    const [hasMore, setHasMore] = useState<boolean>(false);
    const loadMore = () => {
        // call some API to fetch next data.
    }
    return (
        <SimpleInfiniteScroller
            canScrollUp={hasMore}
            loadMore={loadMore}
            reverse
        >
            <ul style={{ overflowY : 'auto', height : '70vh'}}>
                {data.map(v => (
                    <li key={v}>{v}</li>
                ))}
            </ul>
        </SimpleInfiniteScroller>
    )
}

Props

PropertyTypeDefaultDescription
canScrollDownbooleanfalseWhether there is still data to be read for scrolling down. This is required when using the scroll down list
canScrollUpbooleanfalseWhether there is still data to be read for scrolling up. This is required when using the scroll up list
childrenReactElementundefinedThe root element of the scroll like ul or div with an attribute overflowY : 'auto',
reversebooleanfalseIf true, it works assuming a Scroll-up list
nextScrollThresholdnumber250Threshold for the distance to the top or bottom of the window to call the next scroll
loadMorefunctionundefinedSee descriptions below

loadMore

function loadMore(scrolldown : boolean) {
  ...
}

Parameters

  • scrolldown : Will be true if called when scrolling down

Returns

void

Demo

Storybook Demo

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago