react-pull-to-refresh

npm install react-pull-to-refresh -S

A pull to refresh component for the web.

Based on Andy Peatling's Pull to Refresh for the Web

!Demo GIF

Usage

Your refresh handler function takes in resolve and reject to tell the PullToRefresh component when it's finished.

``typescript
async handleRefresh() {
await asyncCode();
}

`

Where you want to render the component:

`typescript



Pull down to refresh

{items}

etc.

`

CSS

Use the CSS from the example as a starting point.

All props

`typescript
export interface ReactPullToRefreshProps extends HTMLAttributes {
onRefresh: () => Promise;
icon?: ReactNode;
loading?: ReactNode;
disabled?: boolean;
distanceToRefresh?: number;
resistance?: number;
hammerOptions?: {
cssProps?: CssProps | undefined;
domEvents?: boolean | undefined;
enable?: boolean | ((manager: HammerManager) => boolean) | undefined;
preset?: RecognizerTuple[] | undefined;
touchAction?: string | undefined;
recognizers?: RecognizerTuple[] | undefined;
inputClass?: HammerInput | undefined;
inputTarget?: EventTarget | undefined;
}
`

- onRefresh: () => Promise
- icon: ReactNode
- _default:_
`html

`
- loading: ReactNode
- _default:_
`html



`
- disabled: boolean
- className: string
- style: object
- distanceToRefresh: number
- _default_: 70
- resistance: number
- _default_: 2.5
- hammerOptions: HammerOptions
`typescript
interface HammerOptions {
cssProps?: CssProps | undefined;
domEvents?: boolean | undefined;
enable?: boolean | ((manager: HammerManager) => boolean) | undefined;
preset?: RecognizerTuple[] | undefined;
touchAction?: string | undefined;
recognizers?: RecognizerTuple[] | undefined;
inputClass?: HammerInput | undefined;
inputTarget?: EventTarget | undefined;
}
``

Thanks

Andy Peatling