# PullToRefresh

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/pull-to-refresh
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

An interaction to load new content with a finger pull-to-refresh in a list.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

An interaction to load new content with a finger pull-to-refresh in a list.

## When to Use

It is suitable for updating the content of the current page.

## Demos

### Basic Usage

### Customize Text

### Handle Refresh Error

### Nested Scroll Areas

## PullToRefresh

### Props

```ts | pure
type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| canReleaseText | Hint text of release | `ReactNode` | `'释放立即刷新'` |
| completeDelay | The time for the delay to disappear after completion, the unit is ms | `number` | `500` |
| completeText | Hint text when completed | `ReactNode` | `'刷新成功'` |
| disabled | Whether the PullToRefresh is disabled | `boolean` | `false` |
| headHeight | The height of the head prompt content area, the unit is px | `number` | `40` |
| onRefresh | Handler function when refresh triggered | `() => Promise<any>` | - |
| pullingText | Hint text of pulling | `ReactNode` | `'下拉刷新'` |
| refreshingText | Hint text when refreshing | `ReactNode` | `'加载中……'` |
| renderText | Customize the pulling content according to the pulling status | `(status: PullStatus) => ReactNode` | - |
| threshold | How far to pull down to trigger refresh, unit is px | `number` | `60` |

## FAQ

### Does it support pull up to load more?

Pull-up loading is another component: [InfiniteScroll](/components/infinite-scroll).

### About the browser's default pull-down behavior

Some browsers or webview containers have elastic effects or pull-to-refresh logic. We do not recommend using the PullToRefresh component in this environment. If you must use it, please disable the default pull-down and elastic effects of the outer browser. , otherwise PullToRefresh and the browser's default behavior may be triggered at the same time, resulting in a poor user experience.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt