react-pull-to-refresh
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

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.

async handleRefresh() {
  await asyncCode();
}

Where you want to render the component:

<ReactPullToRefresh onRefresh={handleRefresh} className="your-own-class-if-you-want" style={{ textAlign: 'center' }}>
  <h3>Pull down to refresh</h3>
  <div>{items}</div>
  <div>etc.</div>
</ReactPullToRefresh>

CSS

Use the CSS from the example as a starting point.

All props

export interface ReactPullToRefreshProps extends HTMLAttributes<HTMLDivElement> {
  onRefresh: () => Promise<void>;
  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<void>
  • icon: ReactNode
    • default:
    <span className="genericon genericon-next"></span>
  • loading: ReactNode
    • default:
    <div className="loading">
      <span className="loading-ptr-1"></span>
      <span className="loading-ptr-2"></span>
      <span className="loading-ptr-3"></span>
    </div>
  • disabled: boolean
  • className: string
  • style: object
  • distanceToRefresh: number
    • default: 70
  • resistance: number
    • default: 2.5
  • hammerOptions: HammerOptions
    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

Package Sidebar

Install

npm i react-pull-to-refresh

Weekly Downloads

1,020

Version

2.0.1

License

MIT

Unpacked Size

19.2 kB

Total Files

6

Last publish

Collaborators

  • bryaneaton13