Refresher

General

Please use your browser's mobile mode to preview.



Here's the content area, just put the content, long enough to scroll.

Show Code
import React from "react";
import Refresher from 'funda-ui/Refresher';
 
export default () => {
 
 
    return (
        <Refresher 
            onRefresh={async () => {
                console.log('Start refreshing');
                await new Promise(resolve => setTimeout(resolve, 2000));
                console.log('The refresh is complete');
            }}
            pullingText="Pull down to refresh"
            readyToRefreshText="Release to refresh"
            refreshingText="Refreshing..."
            //scrollableElementClassName="body.app"
        >
            <div style={{ height: 1000, background: '#f0f0f0' }}>
                Here's the content area, just put the content, long enough to scroll.
            </div>
        </Refresher>
    );
}

API

Refresher

import Refresher from 'funda-ui/Refresher';
PropertyTypeDefaultDescriptionRequired
pullingTextReact.ReactNode'Pull down to refresh'Text shown while pulling down-
readyToRefreshTextReact.ReactNode'Release to refresh'Text shown when threshold is reached-
refreshingTextReact.ReactNode'Refreshing...'Text shown while refreshing-
thresholdnumber100The pull distance (px) that triggers the refresh-
triggerHeightnumber50Height (in px) of the trigger area-
triggerAreaStyleReact.CSSProperties-Custom style for the trigger area-
scrollableElementClassNamestring-Class name of the scrollable element. Only allows pull-to-refresh when its scrollTop is 0-
onRefresh() => Promise<void>-Refresh callback, must return a Promise
childrenReact.ReactNode-Content area

You can add more usage notes or advanced examples below as needed.