1.0.6 • Published 8 years ago

react-simple-scroller v1.0.6

Weekly downloads
4
License
MIT
Repository
github
Last release
8 years ago

React Simple Scroller

A very lightweight but extremely flexible container for scrollable list. All you have to do is to supply hasMore and loadMore and you are ready to go.

alt text

Demo Source

Run the example locally

    git clone https://github.com/yongwangd/react-simple-scroller
    cd react-simple-scroller
    npm install
    npm start

Then open your browser and navigate to localhost:5000

Installation

npm install react-simple-scroller --save
yarn add react-simple-scroller

How to use

import SimpleScroller from 'react-simple-scroller';

Parent node of SimpleScroller should have a height. It could be values like 300px or 50vh SimpleScroller should be the only child of its parent node

<div style={{height: 300}}>
    <SimpleScroller
        loadMore={loadMoreFunc}
        hasMore={true || false}
    >
        {content} <-- whatever you want to put here
    </SimpleScroller>
</div>

Props

NameTypeDefaultDescription
loadMoreFunctionRequired. A callback when more items are requested by the user. No parameter is supplied. The return type of this function should be a Promise if it's loading data asynchronously. loadMore will not be fired until this Promise is resolved`
hasMoreBooleanfalseWhether there are more items to be loaded. loadMore will not be called when hasMore equals false.
distanceToBottomNumber0The distance in pixels before the end of the items that will trigger a call to loadMore.
checkOnValueChangeAnyTrigger a Checking Process when this prop changes
checkOnResizeBooleantrueTrigger a Checking Process when window is resized.

A Checking Process is some dimension calculations to determine if loadMore needs to be fired.

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago